Draggabilly 是一个轻量级的 JavaScript 库，可以使 DOM 元素可拖动。它是一种用于创建交互式 UI 的流行工具，可用于构建拖放、拖曳和重新排序等功能。
安装和引入
要使用 Draggabilly 库，首先需要通过 npm 安装它。在命令行中运行以下命令：
--- ------- ----------- ------
安装完成后，可以将库导入您的项目中。在您的 JavaScript 文件中添加以下代码：
------ ----------- ---- --------------
同时，在您的 HTML 中，为要拖动的元素添加一个 data-draggable 属性：
---- ------------ ----------------------------------
使用方法
在初始化之前，您需要指定要拖动的元素。在这里，我们将使用 jQuery 选择器来选择所有带有 data-draggable 属性的元素：
----- ----------------- - -----------------------------------------------------
接下来，您需要实例化一个 Draggabilly 对象，并将刚才获取到的元素传递给它。请注意，这些元素必须作为数组传递：
----- ------------------ - --- --- ---- - - -- - - ------------------------- ---- - ----- ----------------- - --- ---------------------------------- ------------------------------------------- -
现在，您已经可以拖动元素了！当您将鼠标指针按下并移动时，元素应该会随之移动。您还可以使用以下方法来控制 Draggabilly 对象：
disable(): 禁用拖动enable(): 启用拖动destroy(): 销毁 Draggabilly 对象
示例代码
下面是一个完整的示例代码，它演示了如何使用 Draggabilly 来拖动多个元素：
--------- -----
------
------
----- ----------------
------------------ ------------
-------
----- -
------ ------
------- ------
----------------- -----
--------- ---------
-
--------
-------
------
---- ------------ -----------------------------------
---- ------------ -----------------------------------
---- ------------ -----------------------------------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------------
--------
----- ----------------- - -----------------------------------------------------
----- ------------------ - ---
--- ---- - - -- - - ------------------------- ---- -
----- ----------------- - --- ----------------------------------
-------------------------------------------
-
---------
-------
-------结论
使用 Draggabilly 可以轻松地实现可拖动的 DOM 元素，它是一种非常有用的工具，可以使您的网站更加交互式。希望本文能够帮助您学习如何使用 Draggabilly 库，并在您的项目中取得成功。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/33810