在前端开发中，经常需要实现对页面元素的拖拽和放置操作。这时候使用 npm 包 d-n-d 可以非常方便地实现这个功能。
安装
首先，需要确保你已经安装了 Node.js 和 npm。然后，在命令行中运行以下命令安装 d-n-d：
--- ------- ----- ------
使用
使用 d-n-d 只需几步简单的操作：
1. 导入 d-n-d
在需要使用拖拽和放置功能的页面中，导入 d-n-d：
------ ----------- ---- --------
2. 准备页面元素
将需要拖拽和放置的元素添加到页面中，并为元素添加一个唯一的 ID：
---- ---------- --------------------------- ---- ---------- --------------------------- ---- --------------------- ---- ---------------------
3. 初始化拖拽和放置功能
在页面加载完成后，在 JavaScript 中使用 d-n-d 初始化拖拽和放置功能：
----- ----------- - --- -------------
-- ----
------------------ -------- --------
-- ----
------------------ -------- --------
-- ----------
------------ ------------- -- -
--------------------------------------
--
-- ----------
---------- ------------- ------------ -- -
-- ------------- -
----------------------------------- --- --------------------
- ---- -
----------------------------------- ------------
-
--
---在这段代码中，我们初始化了一个 DragAndDrop 类的实例，并为它传递了以下选项：
- draggableSelector：拖拽元素的选择器。
- droppableSelector：放置区域的选择器。
- onDragStart：拖拽开始事件的回调函数，每次拖拽开始时都会调用这个函数。
- onDragEnd：拖拽结束事件的回调函数，每次拖拽结束时都会调用这个函数，并传递拖拽元素和最终放置的区域。
完成以上步骤后，你就可以拖拽和放置你的页面元素了。
示例代码
以下是一个完整的示例代码，包括 HTML、CSS 和 JavaScript：
-------
----- -
------- --- ----- -----
-------- -----
------- -----
-
----- -
------- --- ----- -----
-------- -----
------- -----
-
--------- -
-------- ---
-
----- -
------- --- ------ -----
-
--------
---- ---------- ------------ -----------------
---- -
------
---- ---------- ------------ -----------------
---- -
------
---- ---------- -------------
---- -
------
---- ---------- -------------
---- -
------
--------
------ ----------- ---- --------
----- ----------- - --- -------------
------------------ -------- --------
------------------ -------- --------
------------ ------------- -- -
--------------------------------------
--
---------- ------------- ------------ -- -
-----------------------------------------
-- ------------- -
----------------------------------
-
--
----------- ------------- -- -
----------------------------------
--
------------ ------------- -- -
-------------------------------------
--
------- ------------- ------------ -- -
-------------------------------------
--
---
---------此时你就可以在你的页面中体验拖拽和放置功能了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d1181e8991b448daa6b