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
5个最佳可排序和可拖动列表JavaScript和jQuery插件

文章图片
HTML5是轻量级的vanillajs微库, 用于使用本机HTML5拖放API创建可排序的列表和网格。该模板具有:
  • 仅2KB(缩小并压缩)。
  • 使用本地HTML5拖放API构建。没有依赖关系。
  • 支持列表和网格样式布局。
  • 支持的浏览器:所有主要浏览器的最新版本(Chrome, Firefox, Safari, Opera, Edge), IE11 +(需要填满)
  • 可用作ES6模块, AMD, CommonJS和iffe, 并具有可排序的全局
尽管朝后的方法会通过使现代浏览器下载大文件来惩罚现代浏览器, 但我们更喜欢提供一个小包装, 而过时的浏览器要承担polyfill的惩罚。另一个好处是, 你可以在任何情况下都填充这些功能, 因此你没有任何额外的负担。
4. jQuery Sortable Lists
5个最佳可排序和可拖动列表JavaScript和jQuery插件

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

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

文章图片
jQuery Sortable是一个灵活, 自以为是的排序插件。它使列表(或表等)中的项目可以使用鼠标在水平和垂直方向上进行排序。支持嵌套列表和纯拖放容器。 jQuery Sortable不依赖jQuery UI, 并且可以与Twitter的Bootstrap配合使用(你甚至可以对Bootstrap导航进行排序)。该插件功能:
  • 对任何容器中的任何项目进行排序
  • 完全支持嵌套容器
  • 连接清单
  • 回调和事件(请参阅文档)
  • 纯拖放列表
  • 垂直和水平分类
1. SortableJS
5个最佳可排序和可拖动列表JavaScript和jQuery插件

文章图片
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(但有支持)
【5个最佳可排序和可拖动列表JavaScript和jQuery插件】如果你知道另一个很棒的开源组件, 该组件允许你通过拖放对列表进行排序, 请在注释框中与社区共享。

    推荐阅读