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