关于H5新特性拖放API讲解

HTML5出来了许多的新特性，拖放就是其中比较有用的特性之一，可以应用到许多业务场景中去，通过这个新特性，我们也可以实现许多有趣的例子。

先看一个通过拖放实现的小Demo：

概念

拖放是H5的新特性，即抓取对象以后拖到另一个位置，但是前提是这个元素设置了属性draggable=true，才能让该元素具有拖放功能。

拖放具有三个过程，即：
开始拖动 -> 拖动中 -> 放置元素

• 开始拖动：指触发拖动的元素的过程，比如轻按元素时；
• 拖动中：移动拖动中的元素；
• 放置元素：把拖动的元素，放置到另一个元素里面的过程。

在不同的阶段，都有其相对应的API，下面我们就看看这些API。

事件

H5的拖放有如下6个API供使用：

• ondragstart
• ondrag
• ondragend
• ondragenter
• ondragover
• ondrop
  上面可以看到我写这些API分两种情况，前三个是拖动的元素对应的API，后三个是放置的元素的API。

例如：我要把div#box1拖动到div#box2，那么div#box1就该监听dragstart和dragend，而div#box2就监听另外三个。

对象	事件	描述
拖动的元素	dragstart	触发拖动时就会执行
	drag	触发拖动后拖动元素过程触发
	dragend	拖动结束后触发
放置的元素	dragenter	当拖动的元素进入绑定的元素区域里就会触发
	dragover	当拖动的元素在放置的元素区域里移动就会触发
	drop	当拖动的元素在放置的元素区域里释放就会触发

注意：drop事件在一些浏览器上可能不会触发，这时需要在dragover和drop事件里面阻止浏览器默认事件：

addEventListener('dragover', e => {
    e.preventDfault()
})
addEventListener('drop', e => {
    e.preventDfault()
})

另外，拖动移入移出的判定是通过鼠标的位置，而不是拖动的元素的位置。

事件顺序：

• 拖动时（未进入放置元素区域）：
  ondragstart -> ondrag -> ondragend
• 拖动时（进入放置元素区域）：
  ondragstart -> ondragenter -> ondragover -> ondrag -> ondrop -> ondragend

数据传递

元素拖放的过程，往往是需要数据传递的，比如放置时要获取拖动元素的状态，其中就可以通过dataTransfer这个对象来传递数据。

通过在dragstart开始阶段设置状态，然后再drop时获取状态，再进行其他操作。

addEventListener('dragstart', e => {
    e.dataTransfer.setData('msg', 'hello')
    // 传递对象
    // e.dataTransfer.setData('greet', JSON.stringify({ msg1: 'hello', msg2: 'good morning' }))
})
addEventListener('drop', e => {
    const msg = e.dataTransfer.getData('msg')
    // TODO
    e.preventDfault()
})

注意，这里的setData只能设置字符串，如果是对象的话，请通过JSON.stringify来序列化。

兼容性

兼容性还是存在一些问题，具体可以看看caniuse。

总结

如果觉得写原生拖动麻烦，这里还推荐再次封装过的sortable.js库，功能强大，使用也不难；

拖动这个特性的应用还是比较广泛的，但因为是H5新特性，兼容在一些浏览器上还是存在一定问题，所以依据项目情况使用。

这里也介绍的全是基础用法，详细的可以去看看MDN文档。