该方法通过用img元素来设置拖放图标。接收三个参数，第一个为图标元素，第二个为图标元素离鼠标指针的X轴位移量，第三个为图标元素离鼠标指针的Y轴位移量。例如：

var source = document.getElementById('source'), icon = document.createElement('img'); icon.src = 'img.png'; source.addEventListener('dragstart',function(ev){ ev.dataTransfer.setDragImage(icon,-10,-10) },false)

effectAllowed 和 dropEffect 属性

这两个属性结合起来设置拖放的视觉效果。

值得注意的是：IE 不支持 dataTransfer 对象。对，不管哪个 IE 版本都不支持。

实现拖放排序

上面已经熟悉了拖放 API 的使用，我们来实现个简单的拖放排序，这也是在项目中比较常见的。先来理一下思路：

主要代码如下：

var source = document.querySelectorAll('.list'), dragElement = null; for(var i = 0; i < source.length; i++){ source[i].addEventListener('dragstart',function(ev){ dragElement = this; },false); source[i].addEventListener('dragenter', function(ev){ if(dragElement != this){ this.parentNode.insertBefore(dragElement,this); } }, false) source[i].addEventListener('dragleave', function(ev){ if(dragElement != this){ if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){ this.parentNode.appendChild(dragElement); } } }, false) }; document.ondragover = function(e){e.preventDefault();} document.ondrop = function(e){e.preventDefault();}

完整的代码地址：drag-demo

兼容

主要是在IE中的兼容不太好，不过至少在IE10中能兼容上面的拖动排序。

而且在我简单的试验中发现，就是在 IE 中元素不设置 height 的时候，不会触发 dragleave 事件。

更重要的一点是在 ios 和安卓上，完全不兼容。不过还好，有一个插件能让它在移动端完美兼容。

插件地址：ios-html5-drag-drop-shim

只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。

<script> var iosDragDropShim = { enableEnterLeave: true } </script> <script src="vendor/ios-drag-drop.js"></script>

以上就是HTML5拖放关于API实现拖放排序的实例代码的详细内容，更多请关注php中文网其它相关文章！