资讯专栏INFORMATION COLUMN

表格拖拽Sortable

tinna / 2318人阅读

摘要:支持和任何库例如功能描述用于可重新排序的拖放列表的库。这里是一个关于的例子。更多更多使用方法请参考官方使用示例仓库地址

Sortable 是一个JavaScript库,用于在现代浏览器和触摸设备上重新排序拖放列表。不需要jQuery。支持 Meteor, AngularJS, React, Polymer, Vue, Knockout 和任何CSS库, 例如 Bootstrap.

功能描述: 用于可重新排序的拖放列表的JavaScript库。 (__JavaScript library for reorderable drag-and-drop lists__)

特性

支持触摸设备和现代浏览器(包括IE9)

可以从一个列表拖到另一个列表或在同一个列表中

移动元素时执行CSS动画

支持拖拽处理和可选文本(比voidberg的html5sortable更好)

智能自动滚动

先进的交换检测

使用原生HTML5拖放API构建

支持 Meteor, AngularJS, React, Polymer, Vue, Knockout

支持任何CSS库, 例如 Bootstrap

简单的API

CDN

不需要jQuery(但支持)

引入

通过npm

</>复制代码

  1. $ npm install sortablejs --save

CDN

</>复制代码

使用

</>复制代码

    • item 1
    • item 2
    • item 3

</>复制代码

  1. var el = document.getElementById("items");
  2. var sortable = Sortable.create(el);

您可以对任何列表及其子元素使用,而不仅仅是ul/li。这里是一个关于div的例子。

Options

</>复制代码

  1. var sortable = new Sortable(el, {
  2. group: "name", // or { name: "...", pull: [true, false, "clone", array], put: [true, false, array] }
  3. sort: true, // sorting inside list
  4. delay: 0, // time in milliseconds to define when the sorting should start
  5. touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
  6. disabled: false, // Disables the sortable if set to true.
  7. store: null, // @see Store
  8. animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
  9. easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
  10. handle: ".my-handle", // Drag handle selector within list items
  11. filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
  12. preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
  13. draggable: ".item", // Specifies which items inside the element should be draggable
  14. ghostClass: "sortable-ghost", // Class name for the drop placeholder
  15. chosenClass: "sortable-chosen", // Class name for the chosen item
  16. dragClass: "sortable-drag", // Class name for the dragging item
  17. dataIdAttr: "data-id",
  18. swapThreshold: 1, // Threshold of the swap zone
  19. invertSwap: false, // Will always use inverted swap zone if set to true
  20. invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
  21. direction: "horizontal", // Direction of Sortable (will be detected automatically if not given)
  22. forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
  23. fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
  24. fallbackOnBody: false, // Appends the cloned DOM Element into the Document"s Body
  25. fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it"s considered as a drag.
  26. scroll: true, // or HTMLElement
  27. scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
  28. scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  29. scrollSpeed: 10, // px
  30. bubbleScroll: true, // apply autoscroll to all parent elements, allowing for easier movement
  31. dragoverBubble: false,
  32. removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it
  33. emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it
  34. setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
  35. dataTransfer.setData("Text", dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
  36. },
  37. // Element is chosen
  38. onChoose: function (/**Event*/evt) {
  39. evt.oldIndex; // element index within parent
  40. },
  41. // Element is unchosen
  42. onUnchoose: function(/**Event*/evt) {
  43. // same properties as onEnd
  44. },
  45. // Element dragging started
  46. onStart: function (/**Event*/evt) {
  47. evt.oldIndex; // element index within parent
  48. },
  49. // Element dragging ended
  50. onEnd: function (/**Event*/evt) {
  51. var itemEl = evt.item; // dragged HTMLElement
  52. evt.to; // target list
  53. evt.from; // previous list
  54. evt.oldIndex; // element"s old index within old parent
  55. evt.newIndex; // element"s new index within new parent
  56. evt.clone // the clone element
  57. evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
  58. },
  59. // Element is dropped into the list from another list
  60. onAdd: function (/**Event*/evt) {
  61. // same properties as onEnd
  62. },
  63. // Changed sorting within list
  64. onUpdate: function (/**Event*/evt) {
  65. // same properties as onEnd
  66. },
  67. // Called by any change to the list (add / update / remove)
  68. onSort: function (/**Event*/evt) {
  69. // same properties as onEnd
  70. },
  71. // Element is removed from the list into another list
  72. onRemove: function (/**Event*/evt) {
  73. // same properties as onEnd
  74. },
  75. // Attempt to drag a filtered element
  76. onFilter: function (/**Event*/evt) {
  77. var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
  78. },
  79. // Event when you move an item in the list or between lists
  80. onMove: function (/**Event*/evt, /**Event*/originalEvent) {
  81. // Example: https://jsbin.com/nawahef/edit?js,output
  82. evt.dragged; // dragged HTMLElement
  83. evt.draggedRect; // DOMRect {left, top, right, bottom}
  84. evt.related; // HTMLElement on which have guided
  85. evt.relatedRect; // DOMRect
  86. evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
  87. originalEvent.clientY; // mouse position
  88. // return false; — for cancel
  89. // return -1; — insert before target
  90. // return 1; — insert after target
  91. },
  92. // Called when creating a clone of element
  93. onClone: function (/**Event*/evt) {
  94. var origEl = evt.item;
  95. var cloneEl = evt.clone;
  96. },
  97. // Called when dragging element changes position
  98. onChange: function(/**Event*/evt) {
  99. evt.newIndex // most likely why this event is used is to get the dragging element"s current index
  100. // same properties as onEnd
  101. }
  102. });
更多

更多使用方法请参考__官方使用示例__ https://sortablejs.github.io/Sortable
git仓库地址https://github.com/SortableJS/Sortable

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102991.html

相关文章

  • 前端插件库

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高胜山 评论0 收藏0
  • 前端插件库

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 评论0 收藏0
  • 拖放排序插件Sortable.js

    摘要:介绍是一款轻量级的拖放排序列表的插件虽然体积小,但是功能很强大下载地址官方特点支持触屏设备和大部分浏览器以下的就不支持了,原因都懂得可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序移动列表单元时有动画支持拖放操作和可选择 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https://github.com/Ru...

    tomorrowwu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<