本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.33节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.33 实现拖曳和拖放处理
实例说明
在HTML 5 中，可以使用如下对象和属性实现拖曳处理。
- DataTransfer 对象：拖曳对象用来传递的媒介，使用一般为Event.dataTransfer。
- draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
<divtitle="拖曳我"draggable="true">列表1</div>
上述对象和属性支持如下鼠标事件和方法。
- ondragstart 事件：当拖曳元素开始被拖曳的时候触发的事件，此事件作用在被拖曳元素上。
- ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上。
- ondragover 事件：拖曳元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上。
- ondrop 事件：被拖曳的元素在目标元素上同时鼠标键放开触发的事件，此事件作用在目标元素上。
- ondragend 事件：当拖曳完成后触发的事件，此事件作用在被拖曳元素上。
- Event.preventDefault() 方法：阻止默认的一些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用document的ondragover事件把它直接干掉。
- Event.effectAllowed 属性：就是拖曳的效果。
本实例分别演示了鼠标光标在滑向某个位置时的不同显示样式，并且在拖动鼠标光标时也有不同的样式。
具体实现
使用Dreamweaver创建一个名为“033.html”的文件，具体代码如下所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aaa</title>
<style type="text/css">
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-
color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
<body>
<div class="dustbin"><br />A<br />B<br />C</div>
<div class="dragbox">
<div class="draglist" title="AA" draggable="true">AAA1</div>
<div class="draglist" title="BB" draggable="true">AAA2</div>
<div class="draglist" title="CC" draggable="true">AAA3</div>
<div class="draglist" title="DD" draggable="true">AAA4</div>
<div class="draglist" title="EE" draggable="true">AAA5</div>
<div class="draglist" title="FF" draggable="true">AAA6</div>
</div>
<div class="dragremind"></div>
<script>
var $ = function(selector) {
/*简单的选择器方法*/
...
};
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
eleDrags[i].onselectstart = function() {
return false;
};
eleDrags[i].ondragstart = function(ev) {
/*拖曳开始*/
//拖曳效果
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
eleDrags[i].ondragend = function(ev) {
/*拖曳结束*/
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
/*拖曳元素在目标元素头上移动的时候*/
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
/*拖曳元素进入目标元素头上的时候*/
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
/*拖曳元素进入目标元素头上，同时鼠标键松开的时候*/
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>
</body>
</html>
执行后的效果如图1-54所示。
