80-拖拽

拖拽

• 只有图片标签默认为可拖拽

• 其他标签需要设置属性draggable="true"

  <div draggable="true"></div>
  

拖拽事件

• 拖拽元素事件

| 事件名      | 含义           |
| ----------- | -------------- |

| `dragstart` | 开始拖拽时触发 |
| `drag`      | 拖拽中事件     |
| `dragend`   | 拖拽结束事件   |

• 投放区事件

事件名	含义
dragenter	进入投放区事件
dragover	覆盖投放区事件
dragleave	离开投放区事件
drop	在投放区松开拖拽元素事件

• 在使用drop事件时必须配合dragover使用，并且阻止默认事件e.preventDefault()

数据传输

• dataTransfer：用于实现在拖拽过程当中，数据的传输

  • setData(key,value)：将数据存储在事件源中
  • getData(key)：获取事件源中的对应数据