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