sortable

功能描述

  • 该模块实现移动端拖动排序功能
  • 可以从一个列表拖动到另一个列表或在同一列表中
  • 移动项目时的CSS动画
  • 智能自动滚动
  • 使用原生HTML5拖放API构建
  • 简单的API
  • 不依赖于任何前端框架

依赖的模块

快速使用

参数示例

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

特别说明