本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第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所示。
https://yqfile.alicdn.com/6e48200f4ef715b285d1d9bf8c480667dbc7aa65.png" >