本例知识点
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