HTML 5 - draggable属性讲解

本例知识点

1、首先，为了使元素可拖动，把 draggable 属性设置为 true ：

2、ondragstart - 用户开始拖动元素时触发

3、ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

4、ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

5、dataTransfer对象是事件对象的一个属性，用于从被拖拽元素相放置目标传递字符串格式的数据。

6、dataTransfer对象有两个主要的方法：getData()方法和setData()方法。

重点

本想应用 draggable制作一个移动端的demo，但发现dataTransfer是鼠标事件的属性。

而移动端只有touch事件，touch根本就没有dataTransfer，自然也就没有getData()和setData()方法了。

所以目前看来，如果想制作移动端的h5拖动应用，dataTransfer肯定是用不了了。

而draggable在移动端貌似也没有起作用。

我个人感觉，dataTransfer和localStorage 很相似，都是在本地保存一些数据。

不同之处在于，dataTransfer只用于从被拖拽元素向 放置目标元素 传递字符串格式的数据。

而localStorage 则完全是本地存储了，关于它的知识以后会讲到。

另，关于这一块的知识，如果哪位同学有更多理解，欢迎留言。

draggable属性视频教程：

视频链接：https://v.qq.com/iframe/player.html?vid=a0165rph1k7&width=670&height=502.5&auto=0