Skip to main content

[note] sortable 筆記

SortableJS @ Github

var sortable = new Sortable(el, {
group: "name", // 可以用來定義可以在哪些"不同的" list 群組之間拖曳
draggable: ".item", // *[重要]定義該 element 中的哪個 items 是可以被拖拉排序的
handle: ".my-handle", // *[重要] 定義哪個 element 是可以被拖曳的元素
filter: ".ignore-elements", // *[重要]定義該 element 中的哪些 items 是無法被拖拉排序的
sort: true, // 能否拖拉排序
delay: 0, // 要按住多久後才能開始多拉
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
ghostClass: "sortable-ghost", // Class name for the drop placeholder
chosenClass: "sortable-chosen", // Class name for the chosen item
dragClass: "sortable-drag", // Class name for the dragging item
dataIdAttr: 'data-id',
forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px
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 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; // target list
evt.from; // previous list
evt.oldIndex; // element's old index within old parent
evt.newIndex; // element's new index within new parent
// 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) {
// Example:,output
evt.dragged; // dragged HTMLElement
evt.draggedRect; // TextRectangle {left, top, right и bottom}
evt.related; // HTMLElement on which have guided
evt.relatedRect; // TextRectangle
originalEvent.clientY; // mouse position
// return false; — for cancel
// Called when creating a clone of element
onClone: function (/**Event*/evt) {
var origEl = evt.item;
var cloneEl = evt.clone;
Last updated on