使用Dragula轻松将拖放添加到网站

是否在寻找免费的库来处理拖放功能 ？ 然后Dragula是您唯一需要的资源。

这个免费的脚本使您可以为页面上的任何元素添加拖放功能 。 这包括对React ＆ AngularJS框架的支持以及香草JavaScript。

Dragula的设置非常容易，并且附带了许多针对用户行为的自定义触发器 。 这意味着您可以在用户拖动项目，单击项目或重新排列页面的任何部分后触发自己的功能。

另 请 阅读： 使用Draggabilly.js使网站上的元素可拖动

如果您看一下现场演示 ，将会找到一些代码片段和可用的示例 。

Dragula设置仅需要一个JavaScript文件即可运行。 虽然，额外的选项可能会引起一些混乱。

例如，假设您有两个容器#left和#right ，它们要支持可拖动项目。 您需要手动将这些容器添加到Dragula函数中，以支持拖放方法。

如果您不了解前端开发的基础知识，那么您将很难使用Dragula。 但是， GitHub存储库中有很多很棒的示例，您可以跟随它们 ，甚至可以复制代码段 。

这是GitHub文档中的一个示例，说明了如何定位两个（左右）容器 ：

dragula([document.querySelector('#left'), document.querySelector('#right')]);

请注意，如果您在GitHub页面上进一步浏览，则会找到大量可以传递给此功能的选项 。

您可以选择复制还是移动项目 ， 哪个容器支持拖动的项目 ，甚至支持通过不同用户行为起作用的回调函数 ，例如：

• 悬停在容器上
• 初始点击和拖动事件
• 掉落事件
• 将元素放出边界
• 通过拖动来克隆元素/容器

该库将进行一些初步的工作，但是如果您熟悉JavaScript，那就应该很容易了。

查看演示页面以了解其工作原理，并获得一些代码示例提示 。 Dragula是一个庞大的库，它可能是处理拖放操作的最佳开源脚本，并且具有最广泛的自定义范围 。

另请阅读： 网页设计：使用jQuery UI Sortable进行拖放

翻译自: https://www.hongkiat.com/blog/dragula-drag-drop-plugin/