編碼環境：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~