编码环境：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;
}
实现效果：
拖动背景的效果：
换装完成的效果：
这样基本就完成了，感觉挺好玩的。O(∩_∩)O~