5个最佳Draggable的JavaScript和jQuery插件

本文概述

• 5. Draggabilly
• 4. Dragula
• 3. Interact.js
• 2. Draggable JS
• 1. jQuery UI

如今, 能够根据我们的需求在屏幕上拖放项目, 排序列表, 更改某些元素的位置的功能非常有用且必要, 相信我, 并不是每个人都喜欢使用复选框, 选择和按钮来执行此类操作。如果你愿意在网站的某些元素上实现此功能, 则可以使用很多库来实现此功能, 但是并不是所有库都能满足标准开发人员的大部分需求。

这就是为什么我们想与你分享一些最不礼貌, 广为人知且易于使用的可拖动插件, 以便你尽快在项目中开始使用此功能的原因。

5. Draggabilly

Github

Draggabilly是VanillaJS插件, 可让你将任何元素拖放, 它支持IE10 +和触摸设备。

4. Dragula

Github

你是否曾经想要过一个可以正常工作的拖放库？那不仅仅取决于肿的框架, 它具有强大的支持吗？这实际上了解放置元素时将元素放置在何处？不需要你花大量的时间来使它起作用吗？好吧, 这个库的开发者也是如此！ Dragula是拖放库, 非常易于使用。它提供的浏览器支持包括所有合理的浏览器和IE7 +。 (允许你在ES5中多填充功能性Array方法)。框架支持包括原始JavaScript, Angular和React。

• 超级容易设置
• 没有肿的依赖
• 自行找出排序顺序
• 放置物品的阴影可提供视觉反馈
• 触摸事件！
• 无需任何配置即可无缝处理点击

3. Interact.js

适用于现代浏览器(以及IE9 +)的JavaScript拖放, 调整大小和多点触控手势。插件功能：

• 强大的捕捉和限制修改器
• 惯性投掷
• 多个同时互动
• 触摸和鼠标事件的统一API
• 自动滚屏
• 惯性和折断
• 多点触控, 同时互动
• 跨浏览器和设备, 支持桌面和移动版本的Chrome, Firefox和Opera以及Internet Explorer 9+
• 与SVG元素的交互
• 独立且可定制
• 除了修改游标之外, 不修改DOM(但是你可以禁用它)

2. Draggable JS

Github

Draggable是一个轻巧, 响应迅速的现代拖放库, 最初由Shopify和开放源代码贡献者开发并维护。使用Draggable, 你可以完全控制Web应用程序的拖放行为。 Draggable将本机浏览器事件抽象到一个全面的API中, 以创建自定义的拖放体验。 Draggable附带其他模块：Sortable, Droppable, Swappable。 Draggable本身在拖动时不会执行任何排序行为, 但是会进行繁重的操作, 例如创建镜像, 发出事件, 管理传感器事件, 使元素可拖动。最著名的功能是：

• 适用于本机拖动, 鼠标, 触摸和强制触摸事件
• 可以通过进入可拖动事件的生命周期来扩展拖动行为
• 可以通过将传感器添加到可拖动对象来扩展拖动检测
• 该库首先针对ES6

Draggable不会通过强迫你使用任何不规则的动画样式来尝试抢夺节目。只需从我们健康的CSS选择器和样式中挑选你想要的东西即可。

1. jQuery UI

下载(仅过滤可拖动组件)

jQuery UI组件仍然是可拖动插件的王者。 jQueryUI提供了draggable()方法以使任何DOM元素均可拖动。元素可拖动后, 可以通过用鼠标单击该元素并将其拖动到视口内的任何位置来移动该元素。

如果你知道可以与jQuery或纯JavaScript一起使用的另一个很棒的可拖动, 可排序和可调整大小的相关库, 请在注释框中与社区共享。