void setDragImage(img, xOffset, yOffset) 指定一副图像，当拖动发生时，显示在光标下方。大多数情况下不用设置，因为被拖动的节点被创建成默认图片。x,y参数分别指示图像的水平、垂直偏移量

//IE10及之前版本，不支持扩展的MIME类型名 //Firefox 5版本之前，不能正确的将url和text映射为text/uri-list 和text/plain var dataTransfer = event.dataTransfer; //读取文本， var text = dataTransfer.getData("Text"); //读取URL, var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");

drag-drop-dataTransfer各属性方法示例

浏览器支持程度

说了这么多，如果浏览器不支持，也是白扯。

Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.
要求最少的js，实现拖拽页面元素的简单方法

note

dataTransfer.items 只有Chrome支持

dropzone属性，目前没有浏览器支持

Firefox支持.setDragImage任何类型的DOM元素。Chrome必须有HTMLImageElement或者任何DOM元素，该DOM元素附加到DOM 和浏览器的.setDragImage视口(viewport)内。
1.部分支持是指不支持dataTransfer.files 或者 .types对象
2.部分支持是指不支持.setDragImage
3.部分支持是指dataTransfer.setData / getData 的有限支持格式

以下，我在实际中遇到的情况，各浏览器对标准的实现还是有差异的。

getData()在chrome 62.0浏览器中，只能在drop事件中生效。

如果使用setDragImage方法，指定的图像不存在，则拖动过程：

safari 11.0.1 浏览器，只会触发dragstart和dragend事件。

chrome、opera 和 Firefox会正常触发其他事件。

每一次拖放操作，Firefox都会执行一次新开一个页面的动作，并且自动搜索dataTransfer.getData()得到的内容。
解决方法，在drop事件中，添加： e.stopPropagation();// 不再派发事件。解决Firefox浏览器，打开新窗口的问题。

opera 49版本中，链接默认不可以拖动，必须把draggable属性设置为true，才可以拖动。

关于 dropEffect 和 effectAllowed 。

示例

drag-drop-dataTransfer各属性方法示例
drag-drop事件触发

总结

原生HTML5拖拽API，drag && drop 在实际工作中，还是有很多情况下会遇到的。
以上，我只介绍了部分常用API。API不复杂，多看会儿，实践就知道了。各个浏览器，可能会在表现上，稍有不同，但我相信大家还是会向着标准发展的。