5个最佳可排序和可拖动列表JavaScript和jQuery插件 _前端开发

本文概述

5. HTML5 Sortable
4. jQuery Sortable Lists
3. Ractive.js sortable decorator插件
2. jQuery Sortable
1. SortableJS

尽管jQuery sortable插件无疑是该库的最著名功能之一, 但是有时你不愿意包括整个jQuery UI库来添加此功能, 相反, 你可能想使用另一个普通库来实现此功能。 , 或使用jQuery(无jQuery UI)对其进行补充。
在此顶部, 我们将与你分享5个最有用的插件, 以通过拖放JavaScript来创建可排序的列表。
5. HTML5 Sortable

文章图片
HTML5是轻量级的vanillajs微库, 用于使用本机HTML5拖放API创建可排序的列表和网格。该模板具有：

仅2KB(缩小并压缩)。
使用本地HTML5拖放API构建。没有依赖关系。
支持列表和网格样式布局。
支持的浏览器：所有主要浏览器的最新版本(Chrome, Firefox, Safari, Opera, Edge), IE11 +(需要填满)
可用作ES6模块, AMD, CommonJS和iffe, 并具有可排序的全局

尽管朝后的方法会通过使现代浏览器下载大文件来惩罚现代浏览器, 但我们更喜欢提供一个小包装, 而过时的浏览器要承担polyfill的惩罚。另一个好处是, 你可以在任何情况下都填充这些功能, 因此你没有任何额外的负担。
4. jQuery Sortable Lists

文章图片
jQuery插件可以对树结构进行排序。拖动和滚动时使运动平稳。你可以通过鼠标对html列表中的项目进行排序。创建树结构。格式化所有活动项目。你可以定义isAllowed回调, 该回调确定是否可以将拖动的项目插入到另一个项目中。插入距离, 例如确定项目将插入到活动区域内部还是外部的距离, 即自动滚动功能的速度。可用的是onDragStart, onChange和完整的回调等。为了更好地理解, 请查看描述可排序列表插件中所有活动元素的图片。现在, 插件也支持移动设备。链接jquery-sortable-lists-mobile.js而不是jquery-sortable-lists.js。
3. Ractive.js sortable decorator插件

文章图片
该插件向Ractive添加了可排序的装饰器, 该装饰器使与数组成员相对应的元素可以使用HTML5拖放API进行重新排序。这样做将更新数组的顺序。当用户将源元素拖动到目标元素上时, 目标元素将添加一个类名。这使你可以以不同的方式呈现目标(例如, 隐藏文本, 添加虚线边框等)。默认情况下, 此类名称为’ droptarget’ 。
2. jQuery Sortable

文章图片
jQuery Sortable是一个灵活, 自以为是的排序插件。它使列表(或表等)中的项目可以使用鼠标在水平和垂直方向上进行排序。支持嵌套列表和纯拖放容器。 jQuery Sortable不依赖jQuery UI, 并且可以与Twitter的Bootstrap配合使用(你甚至可以对Bootstrap导航进行排序)。该插件功能：

对任何容器中的任何项目进行排序
完全支持嵌套容器
连接清单
回调和事件(请参阅文档)
纯拖放列表
垂直和水平分类

1. SortableJS

文章图片
SortableJS是最著名的组件之一, 它使你可以通过JavaScript拖放来重新排序列表。 Sortable是一个JavaScript库, 用于可重新排序的拖放列表。该库具有：

支持触摸设备和现代浏览器(包括IE9)
可以从一个列表拖动到另一个列表或在同一列表内
移动项目时的CSS动画
支持拖动手柄和可选文本(比voidberg的html5sortable更好)
智能自动滚动
高级交换检测
使用原生HTML5拖放API构建
支持
- Meteor
- AngularJS
  - 2.0+
  - 1.*
- React
  - ES2015+
  - Mixin
- Knockout
- Polymer
- Vue
支持任何CSS库, 例如Bootstrap
简单的API
CDN
不需要jQuery(但有支持)