是否在寻找免费的库来处理拖放功能 ? 然后Dragula是您唯一需要的资源。
这个免费的脚本使您可以为页面上的任何元素添加拖放功能 。 这包括对React & AngularJS框架的支持以及香草JavaScript。
Dragula的设置非常简单,并且附带了许多针对用户行为的自定义触发器 。 这意味着您可以在用户拖动项目,单击项目或重新排列页面的任何部分后触发自己的功能。
如果您观看了现场演示,您将找到一些代码片段和可用的示例 。
Dragula设置仅需要一个JavaScript文件即可运行。 虽然,额外的选项可能会引起一些混乱。
例如,假设您有两个容器#left
和#right
,它们要支持可拖动项目。 您需要手动将这些容器添加到Dragula函数中,以支持拖放方法。
如果您对前端开发的基础知识不太了解,那么您将很难使用Dragula。 但是, GitHub存储库中有很多很棒的示例,您可以跟随它们 ,甚至可以复制代码段 。
这是GitHub文档中的一个示例,说明了如何定位两个(左右)容器 :
dragula([document.querySelector('#left'), document.querySelector('#right')]);
请注意,如果您在GitHub页面上进一步查看,则会找到大量可以传递给此功能的选项 。
您可以选择是复制还是移动项目 , 哪个容器支持拖动的项目 ,甚至支持通过不同用户行为起作用的回调函数 ,例如:
- 悬停在容器上
- 初始点击和拖动事件
- 掉落事件
- 将元素放出边界
- 通过拖动来克隆元素/容器
该库将进行一些初步的工作,但是如果您熟悉JavaScript,那么它应该很简单。
查看演示页面以了解其工作原理并获得一些代码示例提示 。 Dragula是一个庞大的库,它可能是处理拖放操作的最佳开源脚本,并且具有最广泛的自定义范围 。
翻译自: https://www.hongkiat.com/blog/dragula-drag-drop-plugin/