方法
| void addElement(Element element) | 设置拖动源。通常不需要改变这项，如果修改这项将会影响拖动的哪个节点和dragend事件的触发。默认目标是被拖动的节点 |
| void clearData(String type) | 删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，将删除所有类型相关联的数据。如果不存在指定类型的数据，或数据传输不包含任何数据，此方法将没有任何效果。 |
| String getData(String type) | 获得给定类型的数据，如果给定类型的数据不存在或者数据转存没有包涵数据，方法将返回一个空字符串。 |
| void setData(String type,String data) | 为一个给定的类型设置数据。如果该数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。如果已经存在的数据类型，替换相同的位置的现有数据。就是，当更换相同类型的数据时，不会更改类型列表的顺序。 |
| void setDragImage(DOMElement image,long x,long y) | 自定义一个期望的拖动时的图片。大多数情况下，这项不用设置，因为被拖动的节点被创建成默认图片。 image 要用作拖动反馈图像元素 x 图像内的水平偏移量. y 像内的垂直偏移量. |
浏览器支持
Internet Explorer 9+、Firefox、Opera 12、Chrome 以及 Safari 5+
演示代码
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Drag & Drop</title> <style type="text/css"> .box { display: inline-block; width: 100px; height: 100px; border: 1px solid #ccccff; background-color: #ccccff; text-align: center; line-height: 100px; } .bin { width: 200px; height: 200px; padding: 10px; border: 1px solid #ccccff; overflow: hidden; float: left; } </style> </head> <body> <div style="display: table;"> <div class="bin"> <div class="box" draggable="true">可拖拽元素</div> </div> <div class="bin"> </div> </div> <script type="text/javascript"> var bins = document.querySelectorAll('.bin'); var boxs = document.querySelectorAll('.box'); var drag = null; for (var i = 0; i < boxs.length; i++) { var box = boxs[i]; box.onselectstart = function() { return false; }; box.ondragstart = function(e) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', e.target.outerHTML); e.dataTransfer.setDragImage(e.target, 0, 0); drag = this; return true; }; box.ondragend = function(e) { drag = null; return false }; } for (var i = 0; i < bins.length; i++) { var bin = bins[i]; //当拖曳元素进入目标元素 bin.ondragover = function(e) { e.preentDefault(); return true; }; //拖拽元素在目标元素上移动 bin.ondragenter = function(e) { this.style.backgroundColor = '#eeeeff'; return true; }; //拖拽元素在目标元素上离开 bin.ondragleave = function(e) { this.style.backgroundColor = '#fff'; return true; }; //拖拽的元素在目标元素上同时鼠标放开 bin.ondrop = function(e) { if (drag) { drag.parentNode.removeChild(drag); this.appendChild(drag); } this.style.backgroundColor = '#fff'; return false; }; } document.body.ondrop = function(e) { e.preventDefault(); e.stopPropagation(); } </script> </body> </html> |
