Dragula 是一个 JavaScript 库，可以让你轻松地实现拖放功能。它是一个开源的 npm 包，可以在任何前端项目中使用。本文将介绍 Dragula 的安装和使用方法，并提供示例代码。
安装
首先，在终端中进入你的项目目录，然后运行下面的命令来安装 Dragula：
npm install dragula --save
这将在你的项目中安装 Dragula 并将其添加到 package.json 文件的依赖列表中。
使用
要使用 Dragula，需要在 HTML 中创建一些可拖动的元素。例如，创建两个 div 元素，一个作为拖动源，另一个作为拖放目标：
<div class="container"> <div class="drag-source">我可以拖动</div> <div class="drop-target">我可以接受拖放</div> </div>
接下来，在 JavaScript 文件中引入 Dragula 库并初始化它：
-- -------------------- ---- -------
----- ------- - -------------------
-- ------------
----- --------- - -------------------------------------
----- ---------- - ---------------------------------------
----- ---------- - ---------------------------------------
-- --- -------
----- ----- - --------------------- -
-- ------
-------- -------- ---- ------- -
------ -----------------------------------------
-
---
-- -----------------
---------------- -------- ---- ------- -
--------------------------------
---在上面的代码中，我们首先获取了拖动源和拖放目标元素，然后使用 dragula 函数初始化 Dragula。在初始化过程中，我们指定了拖动源为 dragSource 元素，并通过 accepts 选项指定了拖放目标为具有 drop-target 类名的元素。最后，在 drop 事件中，我们打印出了目标元素的文本内容。
示例
下面是一个更完整的示例，演示如何使用 Dragula 在多个拖放列表之间移动项目：
-- -------------------- ---- -------
---- ------------------
---- ------------ -----------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
---- ------------ -----------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------- -------------------- ---- -------
----- ------- - -------------------
-- ------------
----- ----- - -----------------------------------------------
----- ----- - -----------------------------------------------
-- --- -------
----- ----- - -------------- -
-- ---------
-------- -------- ---- ------- ------- -------- -
------ ----------------------------------
-
---
-- -----------------
---------------- -------- ---- ------- -
--------------------------------
---在上面的代码中，我们首先获取了所有拖放列表和列表项，并通过 dragula 函数初始化 Dragula。在初始化过程中，我们将所有列表作为可拖放的元素，并指定只有拖放到列表上才会生效。最后，在 drop 事件中，我们打印出了目标元素的文本内容。
结论
Dragula 是一个非常方便的 JavaScript 库，可以轻松地实现拖放功能。在使用 Dragula 时，需要先创建可拖动的元素，然后在 JavaScript 中初始化 Dragula 并指定拖动源和拖放目标。本文提供了基本的安装和使用
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32316
