前言
在 web 前端开发中，拖拽功能应用非常广泛。然而，实现拖拽功能常常需要大量的代码，特别是当我们需要在多个元素之间实现拖拽时，代码量更是会变得极其庞大。为了简化开发，我们可以使用 npm 包 node-dom-draggable。
简介
node-dom-draggable 是一个基于 drag 事件 API 封装的 npm 包，可用于简化 DOM 元素的拖拽操作。
如何使用
安装
使用 npm 安装 node-dom-draggable：
npm install node-dom-draggable
导入
导入 node-dom-draggable：
import Draggable from 'node-dom-draggable';
使用
Draggable 构造函数接受一个 DOM 元素作为参数，用于指定需要实现拖拽功能的元素。例如，我们要让 div#drag 元素实现拖拽功能：
<div id="drag">拖我</div>
const drag = document.getElementById('drag');
const draggable = new Draggable(drag);这样，我们就成功实现了 div#drag 元素的拖拽功能。
此外，Draggable 还提供了一些其他的选项，例如 containment、axis、snapToGrid 等，可以通过传递一个选项对象来使用。例如，指定拖拽元素只能在指定区域内移动：
const drag = document.getElementById('drag');
const draggable = new Draggable(drag, {
containment: [0, 0, 100, 100]
});注意，containment 选项是一个数组，分别表示拖拽元素在水平和垂直方向上允许移动的范围。具体的含义可以查看文档。
示例代码
下面我们来看一个完整的示例代码，演示如何使用 node-dom-draggable 实现多个元素的拖拽功能：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ----------
-------
---- -
------ ------
------- ------
----------------- --------
----------- -------
------------ ------
---------- -----
--------- ---------
------- -----
-
--------
-------
------
---- ----------- -----------------
---- ----------- -----------------
---- ----------- -----------------
---- ----------- -----------------
------- -------------------------------------------------------------
--------
----- ----- - ----------------------------------
------------------- -- -
--- -------------- -
------------ --- -- ---- ----
---
---
---------
-------
-------深度分析
虽然 node-dom-draggable 简化了实现拖拽功能的代码，但它是如何实现的呢？这里我们简单介绍一下。
drag 事件
在 HTML5 中，开始拖动时会触发 dragstart 事件，拖动过程中会多次触发 drag 事件，结束拖动时会触发 dragend 事件。我们可以通过监听这些事件来实现拖拽功能。
drag 事件提供了鼠标移动的位置信息，我们可以根据这些信息来计算出拖拽元素应该被移动到的位置。具体实现过程可以参考 node-dom-draggable 的源码。
计算位置
计算位置是实现拖拽功能的关键。我们需要记录下鼠标移动的距离，然后加上拖拽元素起始位置的坐标，即可得到当前拖拽元素应该被移动到的位置。
在计算位置时，还需要考虑 container、axis、snapToGrid 等选项。例如，如果指定了 container，那么拖拽元素的位置就不能超出 container 的范围。
总结
使用 node-dom-draggable 可以大大简化实现 DOM 元素的拖拽功能的代码量，让我们更加专注于业务逻辑的实现。同时，通过分析其实现原理，我们可以更深入地了解拖拽功能的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ae981e8991b448d88e4