Sortable

Sortable is a JavaScript library for reorderable drag-and-drop lists.
Sortable是一个JavaScript库，用于可重新排序的拖放列表。

Demo: http://sortablejs.github.io/Sortable/

Features

Supports touch devices and modern browsers (including IE9)
支持触摸设备和现代浏览器（包括IE9）
Can drag from one list to another or within the same list
可以从一个列表拖动到另一个列表或在同一列表中
CSS animation when moving items
移动项目时的 CSS 动画
Supports drag handles and selectable text (better than voidberg's html5sortable)
支持拖动手柄和可选文本（优于voidberg的html5sortable）
Smart auto-scrolling
智能自动滚动
Advanced swap detection
高级交换检测
Smooth animations
平滑动画
Multi-drag support
多拖拽支持
Support for CSS transforms
支持 CSS 转换
Built using native HTML5 drag and drop API
使用原生 HTML5 拖放 API 构建
Supports（支持）
- Meteor
- Angular
  - 2.0+
  - 1.*
- React
  - ES2015+
  - Mixin
- Knockout
- Polymer
- Vue
- Ember
Supports any CSS library, e.g. Bootstrap
支持任何CSS库，例如Bootstrap
Simple API
简单的接口
Support for plugins
支持插件
CDN
No jQuery required (but there is support)
不需要jQuery（但有支持)
Typescript definitions at @types/sortablejs
Typescript 定义@types/sortablejs

Articles（文章）

Dragging Multiple Items in Sortable (April 26, 2019)
Swap Thresholds and Direction (December 2, 2018)
Sortable v1.0 — New capabilities (December 22, 2014)
Sorting with the help of HTML5 Drag'n'Drop API (December 23, 2013)

Getting Started（开始）

Install with NPM:（使用 NPM 安装）

$ npm install sortablejs --save

Install with Bower:

$ bower install --save sortablejs

Import into your project:（导入到项目中）

// 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';

Cherrypick plugins:（插件）

// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';

Sortable.mount(new MultiDrag(), new Swap());

// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';

Sortable.mount(new AutoScroll());

Usage（用法）


    item 1
    item 2
    item 3

var el = document.getElementById('items');
var sortable = Sortable.create(el);

You can use any element for the list and its elements, not just ul/li. Here is an example with divs.
您可以将任何元素用于列表及其元素，而不仅仅是 ul / li。下面是一个 div 的示例。

Options（配置）

var sortable = new Sortable(el, {
    //group: "name",  // 或者 { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
    group: {
       name: "shared",
       pull: function (evt, from, item) {},
       put: function (evt, from, item) {},
    },
    sort: true,  // 排序内部列表
    delay: 0, // 定义排序何时开始的时间 (毫秒)
    delayOnTouchOnly: false, // 仅当用户使用触摸时才会延迟
    touchStartThreshold: 0, // px, 在取消延迟拖动事件之前，该点应该移动多少像素
    disabled: false, // 如果设置为 true，则禁用可排序。
    store: null,  // 请参阅商店
    animation: 150,  // ms, 排序时动画速度移动项目，“0”-无动画
    easing: "cubic-bezier(1, 0, 0, 1)", // 移动动画。默认为 null。例如 https://easings.net/。
    handle: ".my-handle",  // 在列表项中拖动手柄选择器
    filter: ".ignore-elements",  // 不会导致拖动的选择器 (字符串或函数)
    preventOnFilter: true, // 触发 “过滤” 时调用 “事件.预防性默认 ()”
    draggable: ".item",  // 指定元素中的哪些项目应该是可拖动的
    dataIdAttr: 'data-id',
    ghostClass: "sortable-ghost",  // 放置占位符的类名
    chosenClass: "sortable-chosen",  // 所选项目的类名
    dragClass: "sortable-drag",  // 拖动项的类名
    swapThreshold: 1, // 交换区域的阈值
    invertSwap: false, // 如果设置为 true，将始终使用反转交换区域
    invertedSwapThreshold: 1, // 反向交换区域的阈值 (默认情况下将设置为交换阈值)
    direction: 'horizontal', // 可排序的方向 (如果没有给出，将自动检测)
    forceFallback: false,  // 忽略 HTML5 DnD 行为并强制回退启动
    fallbackClass: "sortable-fallback",  // 使用 forceFallback 时克隆的 DOM 元素的类名
    fallbackOnBody: false,  // 将克隆的 DOM 元素附加到文档正文中
    fallbackTolerance: 0, // 以像素为单位指定鼠标在被视为拖动之前应移动的距离。
    scroll: true, // or HTMLElement
    scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) {}, // 如果您有自定义滚动条，Scrolfn可用于自动滚动
    scrollSensitivity: 30, // px, 鼠标必须离边缘多远才能开始滚动
    scrollSpeed: 10, // px
    bubbleScroll: true, // 将autoscroll应用于所有父元素，以便于移动
    dragoverBubble: false,
    removeCloneOnHide: true, // 当克隆元素没有显示时，删除它，而不仅仅是隐藏它
    emptyInsertThreshold: 5, // px, 距离鼠标必须从空的可排序插入拖动元素到它
    setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
        dataTransfer.setData('Text', dragEl.textContent); // HTML5 DragEvent 的 “datatransfers” 对象
    },
    // 元素被选中
    onChoose: function (/**Event*/evt) {
        evt.oldIndex;  // 父级中的元素索引
        console.log('onChoose-1', evt);
    },
    // 元素未关闭
    onUnchoose: function(/**Event*/evt) {
        // 与 onEnd 相同的属性
        console.log('onUnchoose-4/6', evt);
    },
    // 元素拖动开始
    onStart: function (/**Event*/evt) {
        evt.oldIndex;  // 父级中的元素索引
        console.log('onStart-3', evt);
    },
    // 元素拖动结束
    onEnd: function (/**Event*/evt) {
        console.log('onEnd-5/9', evt);
        var itemEl = evt.item;  // 拖动的 HTMLElement
        evt.to;    // 目标列表
        evt.from;  // 上一个列表
        evt.oldIndex;  // 元素在旧父级中的旧索引
        evt.newIndex;  // 元素在新父级中的新索引
        evt.oldDraggableIndex; // 元素在旧父级中的旧索引，仅计数可拖动的元素
        evt.newDraggableIndex; // 元素在新父级中的新索引，仅计数可拖动元素
        evt.clone // 克隆元素
        evt.pullMode;  // 当项目处于另一个可排序状态时: “clone” (如果克隆)，“true” (如果移动)
        console.log('itemEl', itemEl);
        console.log('evt.to', evt.to);
        console.log('evt.from', evt.from);
        console.log('evt.oldIndex', evt.oldIndex);
        console.log('evt.newIndex', evt.newIndex);
        console.log('evt.oldDraggableIndex', evt.oldDraggableIndex);
        console.log('evt.newDraggableIndex', evt.newDraggableIndex);
        console.log('evt.clone', evt.clone);
        console.log('evt.pullMode', evt.pullMode);
    },
    // 元素从另一个列表中放入列表中
    onAdd: function (/**Event*/evt) {
        // 与 onEnd 相同的属性
        console.log('onAdd-1/3', evt);
    },
    // 已更改列表中的排序
    onUpdate: function (/**Event*/evt) {
        // 与 onEnd 相同的属性
        console.log('onUpdate-6.1', evt);
    },
    // 通过对列表的任何更改调用 (add / update / remove)
    onSort: function (/**Event*/evt) {
        // 与 onEnd 相同的属性
        console.log('onSort-4/8', evt);
    },
    // 元素从列表中删除到另一个列表中
    onRemove: function (/**Event*/evt) {
        // 与 onEnd 相同的属性
        console.log('onRemove-7', evt);
    },
    // 尝试拖动过滤元素
    onFilter: function (/**Event*/evt) {
        console.log('onFilter-1', evt);
        var itemEl = evt.item;  // HTMLElement 接收 “mousedown | Tapstart” 事件。
    },
    // 在列表中或列表之间移动项目时的事件
    onMove: function (/**Event*/evt, /**Event*/originalEvent) {
        console.log('onMove-5', evt);
        // Example: https://jsbin.com/nawahef/edit?js,output
        evt.dragged; // 拖动的 HTMLElement
        evt.draggedRect; // DOMRect {left, top, right, bottom}
        evt.related; // 有指导的 HTMLElement
        evt.relatedRect; // DOMRect
        evt.willInsertAfter; // 默认情况下，如果 Sortable 将在目标后插入拖动元素，则为 true 的布尔值
        originalEvent.clientY; // 鼠标位置
        // return false; — 取消
        // return -1; — 在目标前插入
        // return 1; — 在目标后插入
    },
    // 创建元素的克隆时调用
    onClone: function (/**Event*/evt) {
        console.log('onClone-2', evt);
        var origEl = evt.item;
        var cloneEl = evt.clone;
    },
    // 拖动元素更改位置时调用
    onChange: function(/**Event*/evt) {
        console.log('onChange-2/5.1', evt);
        evt.newIndex // most likely why this event is used is to get the dragging element's current index
        // 与 onEnd 相同的属性
    }
});

`group` 选项

To drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements.
若要将元素从一个列表拖动到另一个列表，两个列表必须具有相同的值。您还可以定义列表是否可以赠送、赠送和保留副本（clone）以及接收元素

name: String — 组名
pull: true|false|["foo", "bar"]|'clone'|function — 从列表中移出的功能。 clone — 复制项目, 而不是移动。或可放入元素的组名数组。默认为 true.
put: true|false|["baz", "qux"]|function — 可以从其他列表添加元素，还可以从其中添加元素的组名数组。
revertClone: boolean — 移动到另一个列表后，将克隆的元素还原到初始位置

string：命名，个人建议用元素id就行,用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍；
object：{name,pull,put}
name：同string的方法，
pull：pull用来定义从这个列表容器移动出去的设置，true/false/'clone'/function
true:列表容器内的列表单元可以被移出；
false：列表容器内的列表单元不可以被移出；
'clone'：列表单元移出，移动的为该元素的副本；
function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
put：put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function
true:列表容器可以从其他列表容器内放入列表单元；
false：与true相反；
['foo','bar']：这个可以是一个字符串或者是字符串的数组，代表的是group配置项里定义的name值；
function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；

Demo:

https://jsbin.com/hijetos/edit?js,output
https://jsbin.com/nacoyah/edit?js,output — use of complex logic in the pull and put
复杂逻辑在计算机中的应用pull 和 put
https://jsbin.com/bifuyab/edit?js,output — use（使用）revertClone: true

`sort` 选项

允许在列表内部排序。

Demo: https://jsbin.com/jayedig/edit?js,output

`delay` 选项

Time in milliseconds to define when the sorting should start. Unfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag & drop.
定义排序何时开始的时间（以毫秒为单位）。不幸的是，由于浏览器的限制，在IE或Edge上无法通过本机拖放进行延迟

Demo: https://jsbin.com/zosiwah/edit?js,output

`delayOnTouchOnly` 选项

Whether or not the delay should be applied only if the user is using touch (eg. on a mobile device). No delay will be applied in any other case. Defaults to false.
是否应仅在用户使用触摸（例如，在移动设备上）时才应用延迟。在任何其他情况下，均不适用延迟。缺省值为false

`swapThreshold` 选项

Percentage of the target that the swap zone will take up, as a float between 0 and 1.
交换区域将占用的目标的百分比，作为和之间的浮动 0 和 1.
Read more

Demo: http://sortablejs.github.io/Sortable#thresholds

`invertSwap` 选项

Set to true to set the swap zone to the sides of the target, for the effect of sorting "in between" items.
设置为将交换区域设置为目标的两侧，以便对"介于两者之间"的项目进行排序
Read more

Demo: http://sortablejs.github.io/Sortable#thresholds

`invertedSwapThreshold` 选项

Percentage of the target that the inverted swap zone will take up, as a float between 0 and 1. If not given, will default to swapThreshold.
倒置交换区域将占用的目标的百分比，作为和之间的浮点数。如果未给出，将缺省为 swapThreshold
Read more

`direction` 选项

Direction that the Sortable should sort in. Can be set to 'vertical', 'horizontal', or a function, which will be called whenever a target is dragged over. Must return 'vertical' or 'horizontal'.
可排序对象应采用的方向。可以设置为'vertical', 'horizontal' 、或一个函数，每当拖动目标时都会调用该函数。必须返回 'vertical' 或 'horizontal'.
Read more

Example of direction detection for vertical list that includes full column and half column elements:
包含整列和半列元素的垂直列表的方向检测示例：

Sortable.create(el, {
    direction: function(evt, target, dragEl) {
        if (target !== null && target.className.includes('half-column') && dragEl.className.includes('half-column')) {
            return 'horizontal';
        }
        return 'vertical';
    }
});

`touchStartThreshold` 选项

This option is similar to fallbackTolerance 选项.

When the delay 选项 is set, some phones with very sensitive touch displays like the Samsung Galaxy S8 will fire unwanted touchmove events even when your finger is not moving, resulting in the sort not triggering.
设置delay选项后，某些具有非常灵敏的触摸显示屏的手机（如三星Galaxy S8）将触发不需要的触摸移动事件，即使您的手指不移动，也会导致排序不触发

This option sets the minimum pointer movement that must occur before the delayed sorting is cancelled.
此选项设置在取消延迟排序之前必须发生的最小指针移动

Values between 3 to 5 are good.
介于 3 到 5 之间的值是好的

`disabled` 选项

Disables the sortable if set to true.
如果设置为true，则禁用可排序项

Demo: https://jsbin.com/sewokud/edit?js,output

var sortable = Sortable.create(list);
document.getElementById("switcher").onclick = function () {
    var state = sortable.option("disabled"); // get
    sortable.option("disabled", !state); // set
};

`handle` 选项

To make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.
为了使列表项可拖动，"可排序"将禁用用户的文本选择。这并不总是可取的。若要允许选择文本，请定义一个拖动处理程序，该处理程序是每个列表元素的一个区域，允许拖动它

Demo: https://jsbin.com/numakuh/edit?html,js,output

Sortable.create(el, {
    handle: ".my-handle"
});


    :: list item text one
    
:: list item text two

.my-handle {
    cursor: move;
    cursor: -webkit-grabbing;
}

`filter` 选项

Sortable.create(list, {
    filter: ".js-remove, .js-edit",
    onFilter: function (evt) {
        var item = evt.item,
            ctrl = evt.target;

        if (Sortable.utils.is(ctrl, ".js-remove")) {  // Click on remove button
            item.parentNode.removeChild(item); // remove sortable item
        }
        else if (Sortable.utils.is(ctrl, ".js-edit")) {  // Click on edit link
            // ...
        }
    }
})

`ghostClass` 选项

Class name for the drop placeholder (default sortable-ghost).
放置占位符的类名（缺省值sortable-ghost）

Demo: https://jsbin.com/henuyiw/edit?css,js,output

.ghost {
  opacity: 0.4;
}

Sortable.create(list, {
  ghostClass: "ghost"
});

`chosenClass` 选项

Class name for the chosen item (default sortable-chosen).
所选项的类名（缺省值sortable-chosen）

Demo: https://jsbin.com/hoqufox/edit?css,js,output

.chosen {
  color: #fff;
  background-color: #c00;
}

Sortable.create(list, {
  delay: 500,
  chosenClass: "chosen"
});

`forceFallback` 选项

If set to true, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser. This gives us the possibility to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.
如果设置为 true，则将使用非 HTML5 浏览器的回退，即使我们使用的是 HTML5 浏览器也是如此。这使我们能够即使在较新的浏览器中测试旧浏览器的行为，或者使Drag 'n Drop在桌面，移动和旧浏览器之间感觉更加一致

On top of that, the Fallback always generates a copy of that DOM Element and appends the class fallbackClass defined in the options. This behaviour controls the look of this 'dragged' Element.
最重要的是，回退始终生成该 DOM 元素的副本，并追加选项中定义的类fallbackClass。此行为控制此 dragged元素的外观

Demo: https://jsbin.com/sibiput/edit?html,css,js,output

`fallbackTolerance` 选项

Emulates the native drag threshold. Specify in pixels how far the mouse should move before it's considered as a drag. Useful if the items are also clickable like in a list of links.
模拟本机拖动阈值。以像素为单位指定鼠标在被视为拖动之前应移动的距离。如果项目也可以像在链接列表中一样可单击，则非常有用。

When the user clicks inside a sortable element, it's not uncommon for your hand to move a little between the time you press and the time you release. Dragging only starts if you move the pointer past a certain tolerance, so that you don't accidentally start dragging every time you click.
当用户在可排序元素内单击时，您的手在按下的时间和释放的时间之间移动一点并不罕见。仅当将指针移动到某个容差之后，才会开始拖动，这样您就不会在每次单击时都意外地开始拖动

3 to 5 are probably good values.
3 到 5 可能是不错的值

`dragoverBubble` 选项

If set to true, the dragover event will bubble to parent sortables. Works on both fallback and native dragover event. By default, it is false, but Sortable will only stop bubbling the event once the element has been inserted into a parent Sortable, or can be inserted into a parent Sortable, but isn't at that specific time (due to animation, etc).
如果设置为 true，则 dragover 事件将冒泡到父可排序对象。适用于回退和本机拖放事件。默认情况下，它是 false，但 Sortable 只有在元素插入到父可排序对象中后才会停止冒泡事件，或者可以插入到父可排序对象中，但不是在那个特定时间（由于动画等）

Since 1.8.0, you will probably want to leave this option as false. Before 1.8.0, it may need to be true for nested sortables to work.
从 1.8.0 开始，您可能希望将此选项保留为 false。在 1.8.0 之前，它可能需要是true嵌套可排序对象才能正常工作

`removeCloneOnHide` 选项

If set to false, the clone is hidden by having it's CSS display property set to none. By default, this option is true, meaning Sortable will remove the cloned element from the DOM when it is supposed to be hidden.
如果设置为false，则通过将克隆的 CSS 属性设置为display来隐藏克隆。默认情况下，此选项为none ，这意味着 Sortable 将在 DOM 中移除应该隐藏的克隆元素

`emptyInsertThreshold` 选项

The distance (in pixels) the mouse must be from an empty sortable while dragging for the drag element to be inserted into that sortable. Defaults to 5. Set to 0 to disable this feature.
拖动时鼠标必须与空可排序对象之间的距离（以像素为单位），才能将拖动元素插入到该可排序对象中。缺省值为5。设置为0禁用此功能

Demo: https://jsbin.com/becavoj/edit?js,output

Event object (demo)

to:HTMLElement — list, in which moved element
列表，其中移动了元素
from:HTMLElement — previous list
以前的列表
item:HTMLElement — dragged element
拖动的元素
clone:HTMLElement
克隆
oldIndex:Number|undefined — old index within parent
父级中的旧索引
newIndex:Number|undefined — new index within parent
父级中的新索引
oldDraggableIndex: Number|undefined — old index within parent, only counting draggable elements
父级中的旧索引，仅计算可拖动元素
newDraggableIndex: Number|undefined — new index within parent, only counting draggable elements
父级中的新索引，仅计算可拖动元素
pullMode:String|Boolean|undefined — Pull mode if dragging into another sortable ("clone", true, or false), otherwise undefined
如果拖动到另一个可排序（"clone", true, or false ），则为拉模式，否则未定义undefined

`move` event object

to:HTMLElement
from:HTMLElement
dragged:HTMLElement
draggedRect:DOMRect
related:HTMLElement — element on which have guided
已引导的元素
relatedRect:DOMRect
willInsertAfter:Boolean — true if will element be inserted after target (or false if before)
if 元素将插入到目标之后（或者如果之前）

Method（方法）

option(name:`String`[, value:``]):``

Get or set the option.
获取或设置该选项

closest(el:`HTMLElement`[, selector:`String`]):`HTMLElement|null`

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素。

toArray():`String[]`

Serializes the sortable's item data-id's (dataIdAttr 选项) into an array of string.
将可排序对象的项（选项）序列化为字符串数组

sort(order:`String[]`)

Sorts the elements according to the array.
根据数组对元素进行排序

var order = sortable.toArray();
sortable.sort(order.reverse()); // apply

save()

Save the current sorting (see store)
保存当前排序（请参阅商店)

destroy()

Removes the sortable functionality completely.
完全删除可排序功能

Store（商店）

Saving and restoring of the sort.
保存和恢复


    order
    save
    restore

Sortable.create(el, {
    group: "localStorage-example",
    store: {
        /**
         * Get the order of elements. Called once during initialization.
         * 获取元素的顺序。在初始化期间调用一次
         * @param   {Sortable}  sortable
         * @returns {Array}
         */
        get: function (sortable) {
            var order = localStorage.getItem(sortable.options.group.name);
            return order ? order.split('|') : [];
        },

        /**
         * Save the order of elements. Called onEnd (when the item is dropped).
         * 保存元素的顺序。名为onEnd（当项目被删除时）
         * @param {Sortable}  sortable
         */
        set: function (sortable) {
            var order = sortable.toArray();
            localStorage.setItem(sortable.options.group.name, order.join('|'));
        }
    }
})

Bootstrap

Demo: https://jsbin.com/visimub/edit?html,js,output









    This is Sortable
    It works with Bootstrap...
    ...out of the box.
    It has support for touch devices.
    Just drag some elements around.

Static methods & properties（静态方法和属性）

Sortable.create(el:`HTMLElement`[, options:`Object`]):`Sortable`

Create new instance.
创建新实例

Sortable.active:`Sortable`

The active Sortable instance.
活动的可排序实例

Sortable.dragged:`HTMLElement`

The element being dragged.
正在拖动的元素

Sortable.ghost:`HTMLElement`

The ghost element.
幽灵元素

Sortable.clone:`HTMLElement`

The clone element.
克隆元素

Sortable.get(element:`HTMLElement`):`Sortable`

Get the Sortable instance on an element.
获取元素上的可排序实例

Sortable.mount(plugin:`...SortablePlugin|SortablePlugin[]`)

Mounts a plugin to Sortable.
将插件挂载到可排序

Sortable.utils

on(el:HTMLElement, event:String, fn:Function) — attach an event handler function
附加一个事件处理程序函数
off(el:HTMLElement, event:String, fn:Function) — remove an event handler
删除事件处理程序
css(el:HTMLElement):Object — get the values of all the CSS properties
获取所有 CSS 属性的值
css(el:HTMLElement, prop:String):Mixed — get the value of style properties
获取样式属性的值
css(el:HTMLElement, prop:String, value:String) — set one CSS properties
设置一个 CSS 属性
css(el:HTMLElement, props:Object) — set more CSS properties
设置更多 CSS 属性
find(ctx:HTMLElement, tagName:String[, iterator:Function]):Array — get elements by tag name
按标签名称获取元素
bind(ctx:Mixed, fn:Function):Function — Takes a function and returns a new one that will always have a particular context
获取一个函数并返回一个将始终具有特定上下文的新函数
is(el:HTMLElement, selector:String):Boolean — check the current matched set of elements against a selector
根据选择器检查当前匹配的元素集
closest(el:HTMLElement, selector:String[, ctx:HTMLElement]):HTMLElement|Null — for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素
clone(el:HTMLElement):HTMLElement — create a deep copy of the set of matched elements
创建匹配元素集的深层副本
toggleClass(el:HTMLElement, name:String, state:Boolean) — add or remove one classes from each element
在每个元素中添加或删除一个类
detectDirection(el:HTMLElement):String — automatically detect the direction of the element as either 'vertical' or 'horizontal'
自动检测元素的方向为'vertical' 或 'horizontal'

Plugins（插件）

Extra Plugins (included in complete versions)

额外插件（包含在完整版本中）

MultiDrag
Swap

Default Plugins (included in default versions)

默认插件（包含在默认版本中）

AutoScroll
OnSpill

sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；
delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；
disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
animation：number 单位：ms，定义排序动画的时间；
handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；
filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；
draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放
ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；
chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；
forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；
fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；
scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动

事件

onChoose：function 列表单元被选中的回调函数
onStart：function 列表单元拖动开始的回调函数
onEnd：function 列表单元拖放结束后的回调函数
onAdd：function 列表单元添加到本列表容器的回调函数
onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove：function 列表元素移到另一个列表容器的回调函数
onFilter：function 试图选中一个被filter过滤的列表单元的回调函数
onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone：function 当创建一个列表单元副本的时候的回调函数

事件对象

事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，下面简单列举几个：

to：HTMLElement--移动到列表容器
from：HTMLElement--来源的列表容器
item：HTMLElement--被移动的列表单元
clone：HTMLElement--副本的列表单元
oldIndex：number/undefined--在列表容器中的原序号
newIndex：number/undefined--在列表容器中的新序号

方法

option(name[,value])
获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；
closest
没理解
toArray()
序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中
sort()
通过自定义列表单元的data-id的数组对列表单元进行排序
save()
destroy()

CDN

原文转载于：sortablejs 中文文档 - (jianshu.com) 根据此文翻译而来

借助谷歌浏览器翻译的，本人不懂英文，如果有翻译错误请”简友“帮忙翻译完整，留言给我，谢谢！

如果有更好的案例或说明请一起完善

//获取组名称
tragRightObj.option('group').name;
//设置组名称
tragRightObj.option('group', 'NewName');

// 判断鼠标是否落在一个块级元素内部
function checkIn(obj) {
    var x = Number(window.event.clientX) // 鼠标相对屏幕横坐标
    var y = Number(window.event.clientY) // 鼠标相对屏幕纵坐标
    var div_x = Number(obj.getBoundingClientRect().left) // obj相对屏幕的横坐标
    var div_x_width = Number(
        obj.getBoundingClientRect().left + obj.clientWidth
    ) // obj相对屏幕的横坐标+width
    var div_y = Number(obj.getBoundingClientRect().top) // obj相对屏幕的纵坐标
    var div_y_height = Number(
        obj.getBoundingClientRect().top + obj.clientHeight
    ) // obj相对屏幕的纵坐标+height
    if (x > div_x && x < div_x_width && y > div_y && y < div_y_height) {
        return true
    } else {
        return false
    }
}

sortablejs 可 拖拽插件（中文文档-翻译篇）

Sortable

Features

Articles（文章）

Getting Started（开始）

Usage（用法）

Options（配置）

group 选项

sort 选项

delay 选项

delayOnTouchOnly 选项

swapThreshold 选项

invertSwap 选项

invertedSwapThreshold 选项

direction 选项

touchStartThreshold 选项

disabled 选项

handle 选项

filter 选项

ghostClass 选项

chosenClass 选项

forceFallback 选项

fallbackTolerance 选项

dragoverBubble 选项

removeCloneOnHide 选项

emptyInsertThreshold 选项