HTML5原生拖放实例分析

HTML5提供了原生拖放功能的JavaScript API，使用起来很方便。

兼容性：

 

对于PC端浏览器，Firefox、Chrome、Safari支持良好，而IE和Edge浏览器有些特性不支持，如IE10和IE11、Edge对于dataTransfer.setData(format,data) ，只定义了"text"和"URL"两种有效的数据类型。而HTML5规范允许支持各种MIME类型。

详细参考这里： http://caniuse.com/#search=drag

 

本文实现HTML5原生拖放的应用Demo，用到了常用的方法和属性，兼容现代浏览器，还是先看效果：

 

 下面详细介绍——

原生拖放事件：

应用于被拖动元素的事件：

• dragstart

　　　　按下鼠标并开始移动鼠标，会在被拖放的元素上触发dragstart事件。

　　　　注意：要使用HTML5的原生拖放功能，使该元素可拖动，需要设置draggable属性。默认情况下，图像、链接和被选中的文本是可以拖动的，因为它们的draggable属性已经自动被设置成true。

　　　　

• drag

　　　　触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续触发该事件。

• dragend

　　　　拖动停止（放开鼠标）的时候，会触发dragend事件。

 

应用于放置目标的事件：

• dragenter

　　　　只要有元素被拖动到放置目标上，就会触发dragenter事件。

• dragover

　　　　触发dragenter事件后，随即会触发dragover事件，而且只要被拖动元素在放置目标的范围内移动时，就会持续触发。