基于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;
}

 实现效果：

 

拖动背景的效果：

 

换装完成的效果：

 

这样基本就完成了，感觉挺好玩的。O(∩_∩)O~