终于弄懂了HTML5的拖放API(1)

HTML5的拖放(drag和drop)第一部分

拖放即抓取对象以后拖到另一个位置。HTML5中任何元素都能够拖放。

先来看一个简单的示例了解拖放是什么？

可以看到用户可使用鼠标选择可拖拽元素，将元素拖拽到可放置元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

核心代码：

<div
     id="dropBox"
     ondrop="drop(event)"
     ondragover="allowDrop(event)">
</div>
<br>
<div
     id="dragBox"
     draggable="true"
     ondragstart="drag(event)">
    可以把我拖到矩形框中
</div>

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }
    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }
    function drop(ev) {
        ev.preventDefault();
        const data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>

我们可以把拖放操作拆解为两个部分：一个部分是针对可拖拽元素，另一个部分针对放置元素。

可拖拽元素

draggable 属性

draggable属性是一种枚举类型属性（不是布尔类型），用来标识元素是否运行使用浏览器原生行为或HTML拖放操作。draggable不能用于SVG元素，只能用于严格属于HTML的元素。

draggable的取值：

• dragable="true"：元素可以被拖动
• dragable="false"：元素不可用被拖动

如果不设置draggable默认为auto。

在HTML中，除了图像、链接和选中的文本有默认的可拖拽行为以为，其他元素在默认情况下是不可拖拽的。

要使其他的HTML元素可拖拽，必须：

• 将要拖拽到元素的draggable属性设为true；
• 给可拖拽元素添加dragstart事件；
• 在dragstart中设置拖拽数据。

dragstart 事件

当用户开始拖拽操作时，会触发dragstart事件。即在用户开始拖动元素或被选择的文本时调用。

dragstart事件被添加到可拖拽元素本身。我们也可以监听它的祖先元素，因为拖拽事件会冒泡。

dragstart事件可以做什么操作？

在dragstart事件中，我们可以指定拖拽数据、反馈图像和拖拽效果。

拖拽数据

所有的拖拽事件中都有dataTransfer属性，它上面挂有拖拽数据。

要设置拖拽数据，使用setData()方法，接收两个参数，数据类型和数据值：

event.dataTransfer.setData("text/plain", "拖拽的内容");

如果要提供多种格式的数据，可以用不同的数据类型多次调用setData()方法。

const dt = event.dataTransfer;
dt.setData("application/x.bookmark", "bookmarkString");
dt.setData("text/uri-list", "http://www.mozilla.org");
dt.setData("text/plain", "http://www.mozilla.org");

如果需要以相同个数添加两次数据，新数据会替换旧数据。使用clearData()方法清除这些数据，它接收一个参数，要删除的数据类型。

event.dataTransfer.clearData("text/uri-list");

clearData()方法的参数type是可选的。如果未声明type值，所有类型的数据都会被删除。

反馈图像

当拖拽发生时，会生成拖拽元素的半透明图像（触发dragstart事件的元素），并且在拖拽过程中跟踪鼠标指针。这个图像是自动创建的，不需要手动创建它。但是我们可以使用setDragImage()方法来自定义拖拽反馈图像。

event.dataTransfer.setDragImage(image, xOffset, yOffset);

• image是图像的引用，通常是一个<img>元素，但是也可以是<canvas>或任何其他元素，也可以使用不在文档中的图像和画布。生成的反馈图像就是该图像在屏幕上的样子，以图像原始大小绘制。
• xOffset，yOffset是图像位置相对于鼠标指针位置的偏移量。

注意：使用setDragImage()修改反馈图像，image元素必须存在于文档中，如果不存在是不会生效的，当我们需要修改反馈图像，实在没办法可以将反馈图像在文档中定位到视口以为的地方（但我不推荐）。我们可以用javascript创建image元素。

示例1：修改拖动过程中的反馈图像

效果1：将反馈图像修改为<img>

  <div
    id="dropBox"
    ondrop="drop(event)"
    ondragover="allowDrop(event)">
  </div>
  <br>
  <div
    id="dragBox"
    draggable="true"
    ondragstart="drag(event)">
    可以把我拖到矩形框中
  </div>

  <script>
    function allowDrop(ev) {
      ev.preventDefault();
    }
    function drag(ev) {
      let img = new Image();
      // img.src = "http://xxx.xx.drag.image"; // 方式1：外部图片地址
      img.src = "./drag.jpg"; // 方式2：本地图片
      ev.dataTransfer.setDragImage(img, 0, 0);
      ev.dataTransfer.setData("Text", ev.target.id);
    }
    function drop(ev) {
      ev.preventDefault();
      const data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
    }
  </script>

效果2：将反馈图像设置为canvas

  <div
    id="dropBox"
    ondrop="drop(event)"
    ondragover="allowDrop(event)">
  </div>
  <br>
  <div
    id="dragBox"
    draggable="true"
    ondragstart="drag(event)">
    可以把我拖到矩形框中
  </div>
  <canvas style="position: absolute; top: -2999px; left: -2999px"></canvas>

  <script>
    function allowDrop(ev) {
      ev.preventDefault();
    }
    function drag(ev) {
      // 将反馈图像设置为canvas
      var canvas = document.querySelector("canvas");
      
      canvas.width = 100;
      canvas.height = 50;

      let ctx = canvas.getContext("2d");
      ctx.fillStyle = "green";
      ctx.fillRect(10, 10, 200, 200);

      ev.dataTransfer.setData("Text", ev.target.id);
      ev.dataTransfer.setDragImage(canvas, 25, 25);
    }
    function drop(ev) {
      ev.preventDefault();
      const data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
    }
  </script>

拖拽效果

拖拽过程中可能会执行一些操作，给指定属性设置不同的值，会影响到拖拽过程中浏览器显示的鼠标样式

在dragstart事件中可以设置effectAllowed属性以指定允许拖拽源头执行三种操作中的哪几种。默认情况我们不需要修改该属性，除非特殊情况。

// 在dragstart事件中设置`effectAllowed`为`none`，表示不允许拖放操作
event.dataTransfer.effectAllowed = "none";

// 取值有
effectAllowed: none | copy | move | link | copyMove | copyLink | linkMove | all

在拖拽操作期间，dragenter或dragover事件的监听程序可以检查effectAllowed属性，以判定允许执行哪些操作。在dragenter或dragover事件中我们可以设置dropEffect属性，来指定应该执行哪一个单项操作。

// 在`dragenter`或`dragover`事件中设置`dropEffect`为`none`
event.dataTransfer.dropEffect = "move";

dropEffect属性用来控制拖放操作中用户给予的反馈，会影响拖拽过程中浏览器显示的鼠标样式。

// 取值有
dropEffect: none | copy | link | move

drag 事件

drag事件中用户拖动元素或选择文本时，每隔几百ms触发一次。

// 可以使用`addEventListener()`方法或者`ondrag`
addEventListener('drag', (event) => {});

ondrag = (event) => { };

dragend 事件

dragend：当拖拽操作结束时触发（比如松开鼠标按键或ESC按键）。

dragend事件无法被取消。

当拖拽操作结束时，在开始拖拽的目标元素（可拖拽元素）上触发dragend事件。不管拖拽是完成还是取消都会被触发。dragend事件可以检查dropEffect属性的值来确认拖拽是否成功。

function dragend(ev) {
    console.log(ev.dataTransfer.dropEffect) // 如果值为none表示拖拽被取消
}

放置元素

内容太多，就分两个部分吧，下一部分介绍放置元素的相关内容。
单击此处查看HTML5拖放API第二部分