Sortable.js学习笔记

1. 介绍

Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

1.1 使用

npm安装

npm install sortablejs --save

Bower安装方式

bower install --save sortablejs

es导入方式

// Default SortableJS
import Sortable from 'sortablejs';

// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';

// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';

umd方式

<script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>

完整配置项

var sortable = new Sortable(el, {
    //一个网页存在多个分组时设置
    //or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
    group: "name",
    //是否允许列内部排序，如果为false当有多个排序组时,多个组之间可以拖拽，本身不能拖拽
    sort: true,
    // 按下鼠标后多久可以拖拽 1000表示1秒
    delay: 0,
    //如果为false按下鼠标不动才计算延时，移动则无效
    delayOnTouchOnly: false,
    //当按下鼠标移动了n个像素时会取消延迟delay事件，即可超过了这个范围无法拖动元素了
    //px, how many pixels the point should move before cancelling a delayed drag event
    touchStartThreshold: 0,
    //启用禁用拖拽
    disabled: false,
    //Store
    store: null,
    //动画效果
    animation: 150,
    // Easing 动画 默认null. See https://easings.net/ for examples.
    easing: "cubic-bezier(1, 0, 0, 1)",
    //句柄，点击指定class样式的对象才能拖拽元素
    handle: ".my-handle",
    //忽略class为ignore-elements的元素不能拖动,或者通过函数来实现过滤不允许拖动的对象
    // Selectors that do not lead to dragging (String or Function)
    filter: ".ignore-elements",
    //触发filter时调用`event.preventDefault()`
    // Call `event.preventDefault()` when triggered `filter`
    preventOnFilter: true,
    //指定那些元素可以被拖拽
    // Specifies which items inside the element should be draggable
    draggable: ".item",
    //指定获取拖动后排序的data属性
    dataIdAttr: 'data-id',
    //停靠位置的自定义样式
    // Class name for the drop placeholder
    ghostClass: "sortable-ghost",
    //选中元素的自定义样式
    // Class name for the chosen item
    chosenClass: "sortable-chosen",
    //拖拽时的自定义样式
    // Class name for the dragging item
    dragClass: "sortable-drag",
    //交互区大小，A元素到B元素内多深的距离触发替换位置
    //Threshold of the swap zone
    swapThreshold: 1,
    // Will always use inverted swap zone if set to true
    invertSwap: false, 
    // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
    invertedSwapThreshold: 1, 
    //拖拽方向(默认会自动判断方向)
    direction: 'horizontal', 
    //忽略HTML5原生拖拽行为
    forceFallback: false,  
    //拖拽时被克隆元素的样式名称
    // Class name for the cloned DOM Element when using forceFallback
    fallbackClass: "sortable-fallback",  
    // Appends the cloned DOM Element into the Document's Body
    fallbackOnBody: false,  
    // Specify in pixels how far the mouse should move before it's considered as a drag.
    fallbackTolerance: 0, 
    dragoverBubble: false,
    // Remove the clone element when it is not showing, rather than just hiding it
    removeCloneOnHide: true, 
    // px, distance mouse must be from empty sortable to insert drag element into it
    emptyInsertThreshold: 5, 
    setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
        dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
    },
    //点击选中元素事件
    // Element is chosen
    onChoose: function (/**Event*/evt) {
        evt.oldIndex;  // element index within parent
    },
    //取消选中事件
    // Element is unchosen
    onUnchoose: function (/**Event*/evt) {
        // same properties as onEnd
    },
    //开始拖拽事件
    // Element dragging started
    onStart: function (/**Event*/evt) {
        evt.oldIndex;  // element index within parent
    },
    //结束拖拽事件
    // Element dragging ended
    onEnd: function (/**Event*/evt) {
        var itemEl = evt.item;  // dragged HTMLElement
        evt.to;    // target list
        evt.from;  // previous list
        evt.oldIndex;  // element's old index within old parent
        evt.newIndex;  // element's new index within new parent
        evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
        evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
        evt.clone // the clone element
        evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
    },
    // 被拖拽的元素加入到其他列表时的事件
    // Element is dropped into the list from another list
    onAdd: function (/**Event*/evt) {
        // same properties as onEnd
    },
    //排序发生改变时的事件
    // Changed sorting within list
    onUpdate: function (/**Event*/evt) {
        // same properties as onEnd
    },
    // Called by any change to the list (add / update / remove)
    onSort: function (/**Event*/evt) {
        // same properties as onEnd
    },
    // Element is removed from the list into another list
    onRemove: function (/**Event*/evt) {
        // same properties as onEnd
    },
    // Attempt to drag a filtered element
    onFilter: function (/**Event*/evt) {
        var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
    },
    // Event when you move an item in the list or between lists
    onMove: function (/**Event*/evt, /**Event*/originalEvent) {
       /*
           evt.dragged; // 被拖拽的对象
           evt.draggedRect; // 被拖拽的对象所在区域 {left, top, right, bottom}
           evt.related; // 被替换的对象
           evt.relatedRect; // DOMRect
           evt.willInsertAfter; // 是在被替换对象的前面还是后面
           originalEvent.clientY; // 鼠标的位置
         */
        evt.dragged; // dragged HTMLElement
        evt.draggedRect; // DOMRect {left, top, right, bottom}
        evt.related; // HTMLElement on which have guided
        evt.relatedRect; // DOMRect
        evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
        originalEvent.clientY; // mouse position
        // return false; — for cancel
        // return -1; — insert before target
        // return 1; — insert after target
    },
    // Called when creating a clone of element
    onClone: function (/**Event*/evt) {
        var origEl = evt.item;
        var cloneEl = evt.clone;
    },
    // Called when dragging element changes position
    onChange: function (/**Event*/evt) {
        evt.newIndex // most likely why this event is used is to get the dragging element's current index
        // same properties as onEnd
    }
});