简介
dnd-js 是一款拖放库，支持用户通过拖放来更改 HTML 页面中的元素位置。它可实现多种交互效果，例如：拖放元素复制、对元素进行自定义排序等。
通过 npm 包管理工具，我们可以很方便地获取并使用这个库，接下来我们将会提供详细的使用教程。
安装
建议先创建一个项目目录，用来存放我们要开发的项目。在此目录下，我们可以使用 npm 安装 dnd-js：
npm install dnd-js
使用
dnd-js 中最主要的模块为 DragAndDrop 类。了解这个类中的方法和属性是使用 dnd-js 的关键。下面我们将介绍 DragAndDrop 类的常用方法和事件。
Demo
先来看一下一个简单的例子。这个例子实现了一个拖放的效果，我们可以通过它来加深对 dnd-js 使用的理解：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ------------
-------
------
--- --------------
-------- ------
-------- ------
-------- ------
-----
------- ----------------------------------------------
--------
--- -- - --- -------------
---------- -----------
------------------- -------
---------- ---------- -
---------------------- --------
--
---
---------
-------
-------上面的例子创建了一个包含三个
通过创建一个 DragAndDrop 实例并指定容器选择器和可拖拽类名，我们实现了拖放的效果。在 DragAndDrop 的初始化函数中，我们还可以指定拖拽结束时的回调函数。
拖放元素复制
下面是一个拖放元素复制的例子。在这个例子中，我们可以拖动列表中的元素并复制它们到一个新的容器中。这个例子会更进一步地演示如何使用 dnd-js 库：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ------------
-------
-- ------------ --
-------- -
----------------- -----
-
--------
-------
------
--- --------------
--- --------------------- ------
--- --------------------- ------
--- --------------------- ------
-----
--- --------------------
------- ----------------------------------------------
--------
--- ----------- - --- -------------
---------- ------------
------------------- -------
------ ------------ -
-- ------
--- ---- - -------------------
-- --------------
------------------------------
-- --------- --
------- - ------ - --- -----------------
------ -----
--
------- ------------ ---------- -
-- - --------- -------
--------------------------
--
---
--- --------- - -------------------------------------
---------------------------
---------- ----------
-------- ------------ -
-- -----------
------ ---------------------------------
--
---
---------
-------
-------这个例子在代码中新增了一些特殊的逻辑，以进行拖动元素的复制操作。为了实现复制，我们在初始化 DragAndDrop 对象时指定了一个 “clone” 回调函数。这个函数能帮助我们在元素被拖拽时创建它的副本。
有了 “clone” 回调函数，我们还需要为目标容器设置一个 ondrop 监听函数，以将副本插入容器中。为此，我们使用了 DragAndDrop 对象的 “makeDroppable” 方法。
最后，我们还需要考虑的一点是：为了防止被复制的元素被放置到其他不该放置的地方，我们使用了 “canDrop” 回调函数对目标区域进行了限制。
结论
dnd-js 是一个很好的拖放库，有助于我们实现复杂的拖放交互功能。通过本文的介绍，我们可以更好地掌握它的用法，开发出更炫酷的 web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd081e8991b448e5723