draggable属性和dataTransfer对象

首先说下HTML5新增的draggable属性。

1.在html5中默认<img.../>和设置了href的是可拖动的，其他都需要手动把元素的draggable属性设置为true。

2.然后使元素携带数据应该为拖动元素的ondragstart（开始拖动触发该事件）事件指定监听器，在监听器中让拖动操作可以携带数据。

3.之后为了让document接受放的动作，为document的ondragover事件设定监听器，在监听器中取消document对拖动事件的默认行为。

4.然而不同浏览器在元素拖动到指定位置释放之后默认的动作是不同的（火狐释放后会跳到新页面，谷歌则没有任何动作）。我们要取消拖放操作的默认动作，为document的ondrap绑定监听器。 例如：写一个可以拖放的div

<div @drapstart="appDrap($event)" @dragover="appDragOver($event)" 
@drop="appDrop($event)" draggable="true">
复制代码

其中dragstart：开始拖动时触发。 dragover：被拖动元素进入本元素范围内拖动时不断触发。 drop：其他元素被放到本元素时触发。

再来说下DataTransfer对象

拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象。 对象属性：

dataTransfer.getData()：获取dataTransfer对象中format格式的数据。 dataTransfer.setData()： 向dataTransfer对象中设置format格式的数据。

参考地址：http://blog.csdn.net/cyseria/article/details/38354291

转载于:https://juejin.im/post/5ab06beaf265da238b7dd466