在前端开发中，拖拽功能是一个必须要用到的功能，而an2-dnd就是一个非常好用的拖拽库，它能够很快地实现拖拽功能，同时也提供了很多自定义的选项，可以满足大多数拖拽需求。
安装
an2-dnd 是一个基于 npm 的模块，使用前需要安装 Node.js 和 npm，然后通过 npm 安装 an2-dnd，命令如下：
npm install an2-dnd --save
使用
在使用 an2-dnd 之前，我们需要导入模块并定义一些基础元素。
首先，我们需要定义一个容器（即可以拖拽的区域）：
<div id="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div>
在 JavaScript 中，我们可以通过以下代码初始化 an2-dnd：
import { An2Dnd } from 'an2-dnd';
const container = document.getElementById('container');
const dnd = new An2Dnd({
container,
draggableSelector: '.item',
});在上面的代码中，我们首先通过 import 导入了 An2Dnd 模块，然后通过 new An2Dnd() 创建了一个实例，并传入了一些选项。
container指定容器的 DOM 元素。draggableSelector指定可拖动的元素的选择器（默认为'.dnd-draggable'）。
现在，我们已经成功地初始化了 an2-dnd，接下来我们就可以使用它提供的 API 来实现拖拽功能了。
API
an2-dnd 提供了以下 API：
.on(eventType: string, callback: Function) => void
添加事件监听器。
eventType：要监听的事件类型，支持的事件类型包括：drag-start：当拖动开始时触发。drag-move：当拖动时触发。drag-end：当拖动结束时触发。
callback：回调函数，接受一个参数event，表示当前事件对象。
-- -------------------- ---- ------- -------------------- ------- -- - ------------------------- ------- --- ------------------- ------- -- - ------------------------ ------- --- ------------------ ------- -- - ----------------------- ------- ---
.off(eventType: string, callback: Function) => void
移除事件监听器。
eventType：要移除的事件类型。callback：要移除的回调函数。
-- -------------------- ---- ------- ----- -------- - ------- -- - ------------------------ ------- -- ------------------- ---------- -- --- -------------------- ----------
.destroy() => void
销毁 an2-dnd 实例，移除所有事件监听器。
dnd.destroy();
示例
最后，让我们看一个完整的例子，实现一个列表的拖拽排序功能：
-- -------------------- ---- -------
---- ---------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
------- ----------------------------------------------------------
--------
----- --------- - -------------------------------------
----- --- - --- --------
----------
------------------ --------
---
--- ------------ - -----
-------------------- ------- -- -
----- - ------ - - ------
------------ - -------
---------------------------------
---
------------------- ------- -- -
----- - -------- ------- - - ------
---------------------------- - ------------------------ ---------------
---
------------------ -- -- -
------------------------------------------
------------ - -----
----- ----- - ------------------------------------
----- --------- - ------------------
------------------ -- -- -
----- ------ - ----------------
----- ------ - ----------------
------ ------ - -------
---
------------------------ ------ -- -
---------------- - ----- - --
------------------ - ----- - --
---
---
---------
-------
---------- -
-------- -----
---------- -----
---- ----
-
----- -
-------- -----
---------------- -------
------------ -------
------ ------
------- ------
------- --- ----- -----
----------------- -----
----------- ----- -----
-
--------- -
-------- ----
-
--------在上面的代码中，我们首先定义了一个容器和一些拖拽项，然后通过 new An2Dnd() 创建了一个实例，并传入了 container 和 draggableSelector。
接着，我们定义了一个变量 draggingItem，用于储存当前拖拽项的引用。
在 drag-start 事件中，我们把当前拖拽项的引用存储到 draggingItem 中，并添加了一个类 dragging，以便在 CSS 中使用。
在 drag-move 事件中，我们通过 clientX 和 clientY 计算出拖拽项的位置，然后应用到 transform 中。
在 drag-end 事件中，我们移除了 dragging 类，并把 draggingItem 设为 null。
然后，我们使用了 Array.from() 将 NodeList 转化为数组，并使用 sort() 来排序。
最后，我们将排好序的项循环处理一遍，给每一个拖拽项设定一个新的 order 值（通过 flex 布局实现），然后更新 data-index 以方便下一次排序。
总结
an2-dnd 是一个非常实用的拖拽库，使用它可以很方便地实现拖拽功能。
在实际使用时，我们需要先初始化一个实例，并通过 API 添加事件监听器来实现我们的拖拽逻辑。
在上面的例子中，我们实现了一个拖拽排序的功能，这个例子应该能够很好地帮助你理解如何使用 an2-dnd。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566ae81e8991b448e2eaf