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(但有支持)

如果你知道另一个很棒的开源组件, 该组件允许你通过拖放对列表进行排序, 请在注释框中与社区共享。