那些被忽略但很好用的 Web API / Drag & Drop

就喜欢拖拖拉拉

现在使用手机、平板来浏览网站的机会比起电脑来说，实在是多太多了，所以其实 Web API 也不断针对这样的趋势在靠拢，像是我们前期介绍的 Battery API 就是一个案例。

使用者在长期使用行动装置的情况下，已经习惯了系统 OS 或 APP 的操作，所以对於「拖曳物件」这个手势动作已经是直觉反应了，而在网站开发中，Drag & Drop API 就是协助我们完成「拖曳」功能的好帮手。

Drag & Drop

Drag & Drop 其实是「拖」和「放」两个动作，也就是除了「拖曳」元素外，也可以将其「放置」在特定位置。这也代表说整个过程中会与使用者交互的元素不只有一个，会发生的事件也不只有一个，在拖放的过程中至少会有两个角色，各自也都有对应的事件：

• Drag Source： 被使用者点击不放并「拖曳」的目标元素。

• Drop Location： 一个可以「放置」 drag source 的元素。

# Attribute:draggable

通常来说，按住元素不放也是没办法拖曳的，若要使其可以拖曳必须要在 HTML 标签上加入 draggable 属性：

<div class="box" draggable="true"></div>

Drop Location 则不用额外添加属性，任何元素都可以是 Drop Location。

# 交互事件

由於前面的表格已经大致说明了各个事件的触发时机了，应该也都不难离解，所以我们就直接试试看能够利用事件做些什麽效果，以及 Drag Source 和 Drop Location 之间该怎麽互动。

- 样式改变

我们可以利用 dragstart 和 dragend 来改变 Drag Source 的样式，让使用者能更清楚目前被拖曳的元素是哪一个，以及利用 dragenter 和 dragleave 来改变 Drop Location 的样式：

<div class="container">
  <div class="box" draggable="true"></div>
  <div class="box" draggable="true"></div>
  <div class="box" draggable="true"></div>
</div>
<div class="container"></div>

.container {
  background: white;
}
.container.hover {
  background: aliceBlue;
}
.box {
  background: lightblue;
  cursor: grab;
}
.box.dragging {
  background: lightgreen;
  cursor: grabbing;
}

const boxes = document.querySelectorAll(".box");
boxes.forEach((box) => {
  box.addEventListener("dragstart", (e) => {
    e.target.classList.add("dragging");
  });
  box.addEventListener("dragend", (e) => {
    e.target.classList.remove("dragging");
  });
});

const containers = document.querySelectorAll(".container");
containers.forEach((container) => {
  container.addEventListener("dragenter", (e) => {
    e.target.classList.add("hover");
  });
  container.addEventListener("dragleave", (e) => {
    e.target.classList.remove("hover");
  });
});

- 鼠标位置

由於 drag 和 dragover 都是不断触发的事件，所以我们可以用来追踪使用者游标的位置：

const boxes = document.querySelectorAll(".box");
boxes.forEach((box) => {
  box.addEventListener("drag", (e) => {
    console.log(`滑鼠在视窗中的座标: ${e.clientX} / ${e.clientY}`);
  });
});

const containers = document.querySelectorAll(".container");
containers.forEach((container) => {
  container.addEventListener("dragover", (e) => {
    console.log(`滑鼠在 Drop Location 中的座标: ${e.offsetX} / ${e.offsetY}`);
  });
});

- 移动元素

最後只要搭配上 drop 事件，我们就可以达成移动元素的效果，不过有个要注意的事情是 dragover 和 drop 会有执行上的冲突，所以如果要让 drop 的 Callback 能够顺利触发，必须要在 dragover 中将预设行为给取消掉：

let source = null;

const boxes = document.querySelectorAll(".box");
boxes.forEach((box) => {
  box.addEventListener("dragstart", (e) => {
    source = e.target;
  box.addEventListener("dragend", (e) => {
    source = null;
  });
});

const containers = document.querySelectorAll(".container");
containers.forEach((container) => {
  container.addEventListener("dragover", (e) => {
    e.preventDefault();
  });
  container.addEventListener("drop", (e) => {
    e.target.appendChild(source)
    e.target.classList.remove("hover");
  });
});

看过以上示范後是不是觉得 Drag & Drop API 还蛮简单的呢？只要先设定好需要拖曳的元素後，透过几个事件的交互就可以达到这样的效果。不过其实很多 API 都是这样的，使用起来都很容易，但实际上要应用时就容易逻辑卡住，所以为了让各位能对 Drag & Drop 有更具体的印象，明天就来实际写一个拖拉的 ToDo List 吧！