六虎

H5 拖拽基础 DataTransfer 和 drag/drop

作者：

柠檬清茶

在

WebAPI: DataTransfer

DataTransfer 结构器是方针用于保存拖动并放下（drag and drop）过程中的数据。例如运用 getData/setData 办法存取数据。

运用结构函数 DataTransfer以及 api

let d = new DataTransfer();
d.setData("a", 123);
d.getData("a"); // 123

从 dom 元素上获取

可拖动方针，darg event 方针的存在一个 dataTransfter 特点。

特点与办法

特点与办法 阐明
dropEffect none, copy(拷贝到新方位), link(树立联系) 或 move（拖拽元素将被移动）。
effectAllowed 供给一切可用的操作类型。必须是 none,copy,copyLink,copyMove,link,linkMove,move,alloruninitialized 之一。
files 包括数据传输中可用的一切本地文件的列表。假如拖动操作不触及拖动文件，则此特点为空列表。
items 供给一个包括一切拖动数据列表的 DataTransferItemList 方针。
types 一个供给 dragstart 事情中设置的格局的 strings 数组。
clearData() 移除数据，clearData 函数只能再 dragStart 函数，在 drop 函数里边调用。
getData() 检索给定类型的数据，假如该类型的数据不存在或 data transfer 不包括数据，则回来空字符串。
setData() 设置给定类型的数据。假如该类型的数据不存在，则将其增加到结尾，以便类型列表中的最终一项将是新的格局。假如该类型的数据已经存在，则在相同方位替换现有数据。
setDragImage() 用于设置自定义的拖动图像。

H5 之前完成拖拽完成办法

PC 端

利用鼠标 mousedown、mousemove 和 mouseup 三个事情可以完成拖拽操作方针跟从鼠标恣意移动的作用。

H5 端

运用 Touch 事情： touchstart、ontouchmove 和 touchend。

拖拽实践类型+拖拽大局特点

事情 On 型事情处理程序 触发时间
drag ondrag 当拖拽元素或选中的文本时触发。
dragend ondragend ) 当拖拽操作结束时触发 (比方松开鼠标按键或敲“Esc”键)
dragenter ondragenter 当拖拽元素或选中的文本到一个可开释方针时触发
dragleave ondragleave 当拖拽元素或选中的文本离开一个可开释方针时触发。
dragover ondragover) 当元素或选中的文本被拖到一个可开释方针上时触发（每 100 毫秒触发一次）。
dragstart ondragstart 当用户开端拖拽一个元素或选中的文本时触发（见开端拖拽操作。
drop ondrop 当元素或选中的文本在可开释方针上被开释时触发。

drop 事情一般将拖动元素放置到方针元素上时触发。同时

留意： 当从操作系统向浏览器中拖拽文件时，不会触发 dragstart 和 dragend 事情。

一个简略的拖拽示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖拽</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        background-color: #eee;
      }
      .pixi {
        width: 30px;
        height: 30px;
        border: 1px solid eee;
        background-color: red;
      }
      .bd {
        border: 3px dashed #fff;
      }
    </style>
    <script type="text/javascript">
      function drag(e) {
        console.log(e);
        e.dataTransfer.setData("Text", e.target.id);
        e.target.classList.add("bd");
      }
      function allowDrop(ev) {
        console.log(ev);
        ev.preventDefault();
      }
      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        let ch = document.getElementById(data);
        ev.target.appendChild(ch);
        ch.classList.remove("bd");
      }
    </script>
  </head>
  <body>
    <div
      id="ctn"
      class="container"
      ondrop="drop(event)"
      ondragover="allowDrop(event)"
    ></div>
    <div
      id="pixi"
      class="pixi"
      draggable="true"
      ondragstart="drag(event)"
    ></div>
  </body>
</html>

div#pixi 元素增加 draggable 特点。

React/Vue 组件

React 拖拽库

名字 阐明
react-beautiful-dnd 运用 React 美丽且易于拖放列表
react-dnd Drag and Drop 为 react
react-draggable React 拖拽组件
react-dropzone 带有 React.js 的简略 HTML5 拖放区。

Vue 拖拽库

名字 阐明
Vue.Draggable 根据 Sortable.js（一款轻量级拖拽排序 JS 插件） 开发的 Vue 拖拽组件。
vue-drag-resize 支撑拖拽和缩放两个大动作，轻量级，无依靠，功用厚实，适合需求缩放的应用场景。
vue-smooth-dnd 是一款简略轻量的拖拽排序 Vue 组件，封装了 smooth-dnd 库。
v-drag 简略好用的 Vue 拖拽组件，对接触事情友爱支撑。
Vue-Easy-DnD 就如他的名字相同简略快捷，没有任何烦琐的功用，支撑键盘事情，支撑 SSR ，支撑接触事情。

小结

  • DataTransfer 是一个 WebAPI 保存拖动/放下数据的方针。getData/setData 两个办法更是常用。
  • 一个简略的拖拽实例，简略运用 DataTransfer 办法。接下来看 拖拽(drag/drop)API。
  • drag/drop api 输出，以及简略的小栗子。

参考

  • # MDN：DataTransfer docs
  • # MDN： HTML 拖放 API

更多文章