HTML5拖动：事件 及 DataTransfer对象

拖放是 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中数据的所有类型。