介绍
dnd.js 是一个基于原生 JavaScript 的拖拽库，它可以让开发者在网页中实现各种复杂的拖拽功能，无需写过多的代码。如今，在前端开发中，拖拽已经成为了必备的技术之一。dnd.js 可以快速地帮助开发者实现拖拽功能，提升开发效率。
安装
dnd.js 独立的 npm 包可以很容易地被下载和安装，具体指令如下：
npm install dnd.js --save-dev
使用
拖拽元素
dnd.js 最基本的使用方式是实现元素的拖拽。我们可以通过以下代码开启元素的拖拽功能：
import dnd from 'dnd.js';
const element = document.getElementById('dragElement');
const dndInstance = new dnd(element);在这个例子中，我们通过 getElementById 方法获取需要绑定拖拽功能的元素，然后通过 new dnd(element) 实例化一个 dnd 对象。这个 dnd 对象可以拖拽这个元素。
拖拽集合
dnd.js 不仅可以让单个元素拖拽，还可以实现集合拖拽功能。我们可以用以下代码来实现集合拖拽：
import dnd from 'dnd.js';
const elements = document.querySelectorAll('.dragElements');
const dndInstances = dnd.createDraggableCollection(elements);在这个例子中，我们使用 querySelectorAll 方法来获取需要绑定拖拽功能的所有元素，然后通过 createDraggableCollection 方法将它们打包成一个 dnd 集合，并返回多个 dnd 对象的数组。
触发事件
当拖拽元素或集合上的事件发生时，dnd.js 提供了多种事件钩子，开发者可以使用这些钩子来定制自己的逻辑。比如，在拖拽元素结束时，在控制台打印一条信息：
import dnd from 'dnd.js';
const element = document.getElementById('dragElement');
const dndInstance = new dnd(element);
dndInstance.on('drop', function() {
console.log('元素拖拽结束');
});在这个例子中，我们实例化一个 dnd 对象并绑定到元素 dragElement 上。当拖拽元素结束时，dndInstance 对象通过 on 方法监听 drop 事件并触发回调函数，在回调函数内部调用控制台打印函数。
示例
以下是一个基于 dnd.js 的拖拽示例代码：
-- -------------------- ---- -------
---- ---- -- ---
---- -----------------
---- -------------------- -----------------------
---- -------------------- ------------------------
---- -------------------- -------------------------
------
---- --- -- ---
--------- -
-------- -----
---------------- -------
------- ------
------------ -------
-
------------- -
------ -----
------- -----
-------------- ----
-
------------------ -
----------------- ----
-
------------------- -
----------------- -----
-
-------------------- -
----------------- ------
-
-- -- -- --
------ --- ---- ---------
----- -------- - -------------------------------------------
------------------------------------------------------------- -- -
--------------------------- ---------- -
------------------- ------
---
------------------------- ---------- -
------------------- ------
---
---在这个示例中，我们使用了 querySelectorAll 方法来获取三个需要拖拽的元素，然后通过 createDraggableCollection 方法将它们包装成一个 dnd 集合，之后添加事件监听函数并输出日志信息。最终的效果如下图：
总结
dnd.js 是一个非常方便快捷的拖拽库，它可以帮助开发者快速地写出各种复杂的拖拽功能。通过本文的介绍和示例，读者应该可以掌握基本的 dnd.js 库的使用方式，进而完善自己的前端技能并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bfc81e8991b448d99c8