拖放是 HTML5 中非常常见的功能。
注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。
提示： 链接和图片默认是可拖动的，不需要 draggable 属性。
在拖放的过程中会触发以下事件：
- 在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件（可用用来清除浏览器默认行为，保证ondrop事件正常触发）
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
注意： 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。
代码片段：
<ul> { listAry.map((item, index) => { return <li key={index} id={item.id} style={{ left: `${index * 40}px` }} draggable="true" // HTML5，draggable 属性使元素可被拖动（链接和图片默认是可拖动的，不需要 draggable 属性） /* 拖拽事件产生时不会触发对应的鼠标事件 */ // 用户开始拖动元素时触发 onDragStart={(ev) => { ev.dataTransfer.setData("Text", ev.target.id); }} // 元素正在拖动时触发 onDrag={(ev) => { }} // 用户完成元素拖动后触发 onDragEnd={(ev) => { }} // 当被鼠标拖动的对象进入其容器范围内时触发此事件 onDragEnter={(ev) => { console.log("onDragEnter", ev.target.id) }} /* 当某被拖动的对象在另一对象容器范围内拖动时（连续）触发此事件 由于是连续触发，多少会影响性能，而其功能完全可被其它事件代替， 它的作用： 在html5中,遇到ondrop()事件无效，可能原因是浏览器的默认操作。 可以在此事件中执行事件阻止系统的默认操作。 */ onDragOver={(ev) => { ev.preventDefault(); }} // 当被鼠标拖动的对象离开其容器范围内时触发此事件 onDragLeave={(ev) => { console.log("onDragLeave", ev.target.id) }} // 在一个拖动过程中，在其容器范围内释放鼠标键时触发此事件 onDrop={(ev) => { console.log("onDrop", ev.target.id) const data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }} >{item.name}</li> }) } </ul>
DataTransfer 对象
拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法：
dataTransfer.setData(format, data)：方法设置被拖数据的数据类型和值：如果给定类型的数据不存在，将被增加在数据的后面，而且作为新的数据类型出现。如果数据给定的类型已经存在，现有的数据将会在相同的位置被取代。更换同类型的数据时，类型列表的顺序没有改变。
dataTransfer.setData()参数：
Format：表示要添加到 拖动对象的拖动数据类型。
Data：表示添加到拖动对象的数据
返回值无。
dataTransfer.getData(format)：获取DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。
dataTransfer.clearData([format])：清除DataTransfer对象中format格式的数据，如果省略format格式，则意味着清除DataTransfer对象中的全部数据。
dataTransfer.dropEffect：设置或返回拖放目标上允许发生的拖放行为。如果此设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许none、copy、link、move值之一。
dataTransfer.effectAllowed：设置或返回被拖动元素允许发生的拖动行为。该属性值可设置为none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。
- none : 此项表示不允许放下(禁止任何操作)
- copy : 允许复制
- copyLink : 允许 copy 或者 link 操作
- copyMove : 允许 copy 或者 move 操作
- link : 允许在新地方建立与源的链接
- linkMove : 允许 link 或者 move 操作
- move : 允许移动到新的位置
- all : 允许所有操作
- uninitialized: 缺省值（默认值）, 相当于 all
dataTransfer.items：该属性返回DataTransferItems对象，该对象代表了拖动数据。
dataTransfer.setDragImage(element x,y)：设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向的距离；y设置图标与鼠标在垂直方向的距离。
dataTransfer.addElement(element)：添加自定义图标。
dataTransfer.types：该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。