HTML5拖动.docVIP

HTML5拖动 1.HTML5的拖动特性新增了Drag Drop 事件 过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，要不停地获取鼠标的坐标，还要不停的修改元素的位置，代码要堆很多，而且性能上也很不好(不停地修改元素位置会导致页面reflow，除非绝对定位)，现在有了html5原生的Drag Drop 拖拽事件，真的是方便了许多，用”事半功倍”来形容绝不为过。 Drag Drop 包括的事件： dragstart：要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素 dragenter：拖拽元素进入目标元素时触发，这个事件对象是目标元素 dragover：拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素 dragleave：拖拽某元素离开目标元素时触发，这个事件对象是目标元素 dragend：在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素 drop：将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素 完成一次成功页面内元素拖拽的行为事件过程应该是： dragstart – dragenter – dragover – drop – dragend 2.Drag Drop 网页内的元素拖拽 　 HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽，如果draggable=”true”，则元素可被拖拽，否则只能选择元素的文本。 DataTransfer接口 值得一提的是HTML5支持拖拽数据存储，使用dataTransfer接口，作用于元素的拖拽基础上，dataTransfer对象包含以下属性和方法： dataTransfer.dropEffect [ = value ]：返回已选择的拖放效果，如果该操作效果与起初设置的effectAllowed效果不符，则拖拽操作失败。可以设置修改，包含这几个值：“none”, “copy”, “link” 和 “move”。 dataTransfer.effectAllowed [ = value ]：返回允许执行的拖拽操作效果，可以设置修改，包含这些值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all” 和 “uninitialized” dataTransfer.types：返回在dragstart事件出发时为元素存储数据的格式，如果是外部文件的拖拽，则返回”files” dataTransfer.clearData ( [ format ] )：删除指定格式的数据，如果未指定格式，则删除当前元素的所有携带数据 dataTransfer.setData(format, data)：为元素添加指定数据 dataTransfer.getData(format)：返回指定数据，如果数据不存在，则返回空字符串 dataTransfer.files：如果是拖拽文件，则返回正在拖拽的文件列表FileList dataTransfer.setDragImage(element, x, y)：制定拖拽元素时跟随鼠标移动的图片，x、y分别是相对于鼠标的坐标(据测试，Chrome暂不支持) dataTransfer.addElement(element)：添加一起跟随拖拽的元素，如果你想让某个元素跟随被拖拽元素一同被拖拽，则使用此方法(据测试，Chrome暂不支持) 3.页面内元素的拖拽操作 在dragstart事件触发时可以为被拖拽元素存储数据，就是使用上面说到的dataTransfer.setData，setData的数据格式一般有两种：”text/plain”(用于文本数据)和”text/uri-list”(用于url)，你可以先为某个可拖拽元素设置微数据，然后为它设置draggable属性为true，之后在其dragstart事件触发时存储数据： html部分： div?id=dragMe?builddate=2011-1-10?draggable=true拖拽我！/divdiv?id=dropHere/div javascript部分： var?oDragMe?=?document.getElementById(dragMe);oDragMe.addEventListener(dragstart,?function(e)?{e.dataTransfer.setData(text/plain,?e.target.getAttribute(builddate));},false