H5的原生元素拖拽事件

一个元素的拖放的过程：

选中–>拖动–>释放

选中

    在HTML5标准中， draggable是一个全局的枚举属性，它决定了一个元素是否可以被拖动。

draggable 的语法：

<element draggable="true | false | auto" >

    true： 可以拖动；

    false：禁止拖动

    auto：跟随浏览器定义元素是否可以拖动

    在web页面中，默认只有text selection,images,links（选中文本、图片、链接）可以被拖动，当一个image或link被拖动时，image或link的url会被设置到drag data中。对于其他元素，必须是selection的一部分才能被拖动。要想所有的元素都能被拖动，需要做三件事情：

    1、设置draggable=“true”到元素上。

    2、添加dragstart事件监听。

    3、在dragstart事件中设置drag data.(通过dataTransfer对象实现)。
 

常用事件 

有了这些drap&drop api事件，我们通过dataTransfer对象设置drag过程中回调函数来处理一些业务逻辑。

注意：dragenter和dragover事件的默认行为是拒绝任何被拖放的元素，因此，我们需要阻止浏览器这种默认行为：ev.preventDefault();
 

DataTransfer 对象 

在drag&drop拖放操作的过程中会触发一个DragEvent对象，属于Dom event的一个子对象，这个对象有一个dataTransfer属性：该属性用于保存拖放的数据和交互信息，返回DataTransfer对象，只读，但其子属性可设置。

dataTransfer的属性： 

dataTransfer的方法：