基于html5拖(drag)放(drop)实现换装小游戏

编码环境：asp.net mvc3 html5

运行环境：firefox浏览器通过。

一：有关html5的拖放功能，网上介绍的一大把，我将自己学习到的知识点总结如下：

1：全局属性draggable

　　具有拖放功能的一个全局属性draggable，true:可拖动；false:不可拖动；auto:视作浏览器支持情况而定；draggable:这个值估计也是可拖动的。

2：事件

既是拖放，得针对两个实体，一个是源实体，一个是目标实体，就是将我们要拖动的源，放到我们要放的目的地，其中涉及到的事件有：

源实体：

　　　　dragstart:在被拖拽的元素开始拖拽的时候触发。

　　　　dragend:在被拖拽的元素拖拽完毕后触发，此事件是在drop(放)的动作之后。

目标实体：

　　　　dragenter:拖拽元素刚进入目标区域时触发，只会触发一次。

　　　　dragover:拖拽元素在目标区域移动是触发。只要有移动就会触发。

　　　　dragleave:拖拽元素在离开目标区域时触发。

　　　　ondrop:拖拽元素放置在目标区域时触发。

完成一次拖动事件的整个过程为：dragstart-->dragenter-->dragover-->drop-->dragend.

关于DataTransfer对象:
该对象用来支持拖拽时数据存储功能，具体的属性和方法可以参考这里，说的好清楚。

二：代码部分。

html代码：

@{Layout = null;
}
<!DOCTYPE html>
<html>
<head><title>拖动测试</title><link href="/Content/group.css" rel="stylesheet" type="text/css" /><script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script><script src="/Scripts/group.js" type="text/javascript"></script>
</head>
<body>
<div style="color:Maroon;font-size:20px; font-weight:bold">基于html5之拖(drag)放(drop)实现换装小游戏</div><div style="margin: 20px;"><div class="containerpic" draggable="true" ondragover="grouppicover(this,event);" ondrop="groupdrop2(this,event);"><img class="pic" alt="pic" src="/Content/group/pic0.png" draggable="true" /><div class="pic divpic1"  draggable="true" contenteditable=true></div><div class="pic divpic2" draggable="true" contenteditable=true></div><img class="pic" alt="pic" src="/Content/group/pic4.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic5.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic6.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic7.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic8.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic9.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic10.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic11.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic12.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic13.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic14.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic15.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic16.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic17.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic18.png" draggable="true" /><img class="pic" alt="pic" src="/Content/group/pic19.png" draggable="true" /></div><div class="grouppic" draggable="true" ondragenter="groupenter(this,event)" ondragover="grouppicover(this,event);"ondrop="groupdrop(this,event);"></div></div>
</body>
</html>

js代码：

var dragSrc;
$(function () {$(".containerpic .pic").each(function () {this.ondragstart = function (ev) {$(this).addClass("pic_select");ev.dataTransfer.effectAllowed = "move";ev.dataTransfer.setData("text", ev.target.innerHTML);ev.dataTransfer.setDragImage(ev.target, 0, 0);dragSrc = this;};this.ondragend = function (ev) {$(this).removeClass("pic_select");};});
});function dragstartimg(obj, ev) {$(obj).addClass("pic_select");ev.dataTransfer.effectAllowed = "move";ev.dataTransfer.setData("text", ev.target.innerHTML);ev.dataTransfer.setDragImage(ev.target, 0, 0);dragSrc = obj;obj.ondragend = function (ev) {$(obj).removeClass("pic_select");};
}
function groupenter(obj, Event) {$(obj).addClass("pic_over");
}
function grouppicover(obj, Event) {Event.preventDefault(); //阻止默认事件
}
function groupdrop(obj, Event) {if (dragSrc) {Event.preventDefault(); //阻止默认事件var x = document.documentElement.scrollLeft + Event.pageX;var y = document.documentElement.scrollTop + Event.pageY;var imgwidth = $(dragSrc).attr("offsetWidth");var imgheight = $(dragSrc).attr("offsetHeight");if (dragSrc.nodeName.toString() == "DIV") {$(obj).append("<div class=\"divpic1\" draggable=true ondragstart=\"dragstartimg(this,event)\"; contenteditable=true style=\"position:fixed;left:" + x + "px;top:" + y + "px;\"></div>");} else {$(obj).append("<img src=" + $(dragSrc).attr("src") + " draggable=true ondragstart=\"dragstartimg(this,event)\"; contenteditable=true style=\"position:fixed;left:" + x + "px;top:" + y + "px;\" />");}$(dragSrc).remove();$(obj).removeClass("pic_over");Event.stopPropagation();}return false;
}
function groupdrop2(obj, Event) {if (dragSrc) {Event.preventDefault(); //阻止默认事件var x = document.documentElement.scrollLeft + Event.pageX;var y = document.documentElement.scrollTop + Event.pageY;   var imgwidth = $(dragSrc).attr("offsetWidth");var imgheight = $(dragSrc).attr("offsetHeight");$(obj).append("<img class=\"pic\" src=" + $(dragSrc).attr("src") + " draggable=true ondragstart=\"dragstartimg(this,event)\"; contenteditable=true style=\"position:fixed;left:" + x + "px;top:" + y + "px;\" />");$(dragSrc).remove();$(obj).removeClass("pic_over");Event.stopPropagation();//阻止事件冒泡}return false;
}

css代码：

.containerpic
{width: 400px;float: left;min-height: 800px;padding: 20px;border: 2px solid #f4f4f4;
}
.pic
{max-width: 50px;
}.divpic1
{background: url("/Content/group/pic2.png") no-repeat 0 0;width: 114px;max-width: 114px;font-size: 12px;color:Maroon;height: 75px;padding: 10px;float: left;
}
.divpic2
{background: url("/Content/group/pic3.png") no-repeat 0 0;width: 96px;font-size: 12px;max-width: 96px;height: 61px;color:Maroon;padding: 10px;float: left;
}.pic_select
{border: 1px dashed Silver;background-color: #c3f1f7;
}.grouppic
{border: 3px dashed Silver;width: 800px;height: 800px;position: fixed;top: 50px;left: 500px;
}
.pic_over
{border: 3px dashed Maroon;
}

基于html5拖(drag)放(drop)实现换装小游戏相关推荐

HTML5 仿QT 示例Drag and Drop Robot 换装机器人
起源在Qt的示例中看到了一个有趣的demo,截图如下: 这个demo的名字叫Drag and Drop Robot,简单概括而言,在这个demo中,可以把机器人四周的颜色拖动到机器人的各个部位,比如 ...
***JAVA*和*Eclipse*开发一个换装小游戏**
JAVA和Eclipse开发一个换装小游戏** 家有一女如有一宝,最近女朋友的少女心有点爆棚,作为一个计算机专业的人,我的情商简直是低到吓人,但是我还是想到了,亲自给女朋友做一个换装的小游戏,来满足女 ...
html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
手机游戏缺少index_264.html,html5手机端大家来找茬微信小游戏代码
特效描述:html5 手机端大家来找茬微信小游戏代码.html5手机端大家来找茬微信小游戏代码代码结构 1. HTML代码重新开始剩余时间: 30 s 分数: 0 点击开始游戏护眼 ...
html拖放数据库字段,利用HTML5拖放(Drag 和 Drop)实现Table间数据的交互
前言作为开发者,我们总是会不经意间的遇到一些令人头疼的需求.比如五彩斑斓的黑,根据手机壳变换APP的颜色等等,你说怎么办.虽然在一般情况下不会这么棘手,但是有些需求刚拿到的时候还是会一筹莫展. 表格 ...
基于Java Swing JFream 组件的趣味推箱子小游戏
一需求分析设计一个经典的推箱子小游戏,在窗体里有墙,箱子,胜利的标志,和工人,用户可以通过键盘上的"上"."下"."左"."右 ...
[源码和文档分享]基于Java Swing JFream 组件的趣味推箱子小游戏
一需求分析设计一个经典的推箱子小游戏,在窗体里有墙,箱子,胜利的标志,和工人,用户可以通过键盘上的"上"."下"."左"."右 ...
基于 python 的德云消消乐益智小游戏设计论文+源码
计科在读分享自己做过的课题设计作业有意可私信了解目录第一章引言 II 1.1 课题背景 1 1.2 目的和意义 1 1.3 国内外的发展现状 1 1.4 开发环境 1 第二章系统开发平台的阐述 ...
HTML5 拖放Drag和drop用法以及事件介绍
dragstart:拖拽开始时在被拖拽元素上触发此事件 drag:拖拽过程中被拖拽的元素会持续不断地发drag事件. dragend:鼠标在拖放目标上释放时,在拖搜元素上触发,将元素从浏览器拖放到操作 ...

基于html5拖(drag)放(drop)实现换装小游戏

基于html5拖(drag)放(drop)实现换装小游戏相关推荐

最新文章

热门文章