HTML 拖放API
学习Drag and Drop · 难度：高级 · +15XP
HTML 拖放 API
Drag and Drop API让元素可以拖拽，实现文件上传、排序等交互。
基本实现
<div draggable="true" ondragstart="event.dataTransfer.setData('text',this.id)">拖我</div>
<div ondragover="event.preventDefault()" ondrop="var id=event.dataTransfer.getData('text');this.appendChild(document.getElementById(id))">放这里</div>拖放事件
| 事件 | 触发对象 |
|---|---|
| dragstart | 被拖元素 |
| drag/dragend | 被拖元素 |
| dragenter/dragover | 目标区域 |
| dragleave/drop | 目标区域 |
???? 练习
- 创建可拖拽的列表项
- 实现文件拖放上传区域