[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
  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
 },

 // 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: http://jsbin.com/tuyafe/1/edit?js,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;
 }
});