sortable

功能描述

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

依赖的模块

sortable.js

快速使用

将libs下的sortable_min_js放到项目中的script文件夹下，

简单实例

  1. <body>
  2. <ul id="items">
  3.     <li>item 1</li>
  4.     <li>item 2</li>
  5.     <li>item 3</li>
  6. </ul>
  7. </body>
  8. <script type="text/javascript" src="script/sortable_min_js"></script>
  9. <script type="text/javascript">
  10.     var el = document.getElementById('items');
  11.     var sortable = Sortable.create(el);
  12.     // var sortable = new Sortable(el, option);
  13. </script>

参数示例

  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.     scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  34.     scrollSpeed: 10, // px
  35.     bubbleScroll: true, // apply autoscroll to all parent elements, allowing for easier movement
  37.     dragoverBubble: false,
  38.     removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it
  39.     emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it
  42.     setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
  43.         dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
  44.     },
  46.     // Element is chosen
  47.     onChoose: function (/**Event*/evt) {
  48.         evt.oldIndex;  // element index within parent
  49.     },
  51.     // Element is unchosen
  52.     onUnchoose: function(/**Event*/evt) {
  53.         // same properties as onEnd
  54.     },
  56.     // Element dragging started
  57.     onStart: function (/**Event*/evt) {
  58.         evt.oldIndex;  // element index within parent
  59.     },
  61.     // Element dragging ended
  62.     onEnd: function (/**Event*/evt) {
  63.         var itemEl = evt.item;  // dragged HTMLElement
  64.         evt.to;    // target list
  65.         evt.from;  // previous list
  66.         evt.oldIndex;  // element's old index within old parent
  67.         evt.newIndex;  // element's new index within new parent
  68.         evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
  69.         evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
  70.         evt.clone // the clone element
  71.         evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
  72.     },
  74.     // Element is dropped into the list from another list
  75.     onAdd: function (/**Event*/evt) {
  76.         // same properties as onEnd
  77.     },
  79.     // Changed sorting within list
  80.     onUpdate: function (/**Event*/evt) {
  81.         // same properties as onEnd
  82.     },
  84.     // Called by any change to the list (add / update / remove)
  85.     onSort: function (/**Event*/evt) {
  86.         // same properties as onEnd
  87.     },
  89.     // Element is removed from the list into another list
  90.     onRemove: function (/**Event*/evt) {
  91.         // same properties as onEnd
  92.     },
  94.     // Attempt to drag a filtered element
  95.     onFilter: function (/**Event*/evt) {
  96.         var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
  97.     },
  99.     // Event when you move an item in the list or between lists
  100.     onMove: function (/**Event*/evt, /**Event*/originalEvent) {
  101.         // Example: https://jsbin.com/nawahef/edit?js,output
  102.         evt.dragged; // dragged HTMLElement
  103.         evt.draggedRect; // DOMRect {left, top, right, bottom}
  104.         evt.related; // HTMLElement on which have guided
  105.         evt.relatedRect; // DOMRect
  106.         evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
  107.         originalEvent.clientY; // mouse position
  108.         // return false; — for cancel
  109.         // return -1; — insert before target
  110.         // return 1; — insert after target
  111.     },
  113.     // Called when creating a clone of element
  114.     onClone: function (/**Event*/evt) {
  115.         var origEl = evt.item;
  116.         var cloneEl = evt.clone;
  117.     },
  119.     // Called when dragging element changes position
  120.     onChange: function(/**Event*/evt) {
  121.         evt.newIndex // most likely why this event is used is to get the dragging element's current index
  122.         // same properties as onEnd
  123.     }
  124. });

特别说明

本模块为sortable.js 1.9.0版本，源码没有修改，更多用法及参数使用示例请参考 Sortable.js