摘要:支持和任何庫例如功能描述用于可重新排序的拖放列表的庫。這里是一個關于的例子。更多更多使用方法請參考官方使用示例倉庫地址
Sortable 是一個JavaScript庫,用于在現代瀏覽器和觸摸設備上重新排序拖放列表。不需要jQuery。支持 Meteor, AngularJS, React, Polymer, Vue, Knockout 和任何CSS庫, 例如 Bootstrap.
功能描述: 用于可重新排序的拖放列表的JavaScript庫。 (__JavaScript library for reorderable drag-and-drop lists__)
特性支持觸摸設備和現代瀏覽器(包括IE9)
可以從一個列表拖到另一個列表或在同一個列表中
移動元素時執行CSS動畫
支持拖拽處理和可選文本(比voidberg的html5sortable更好)
智能自動滾動
先進的交換檢測
使用原生HTML5拖放API構建
支持 Meteor, AngularJS, React, Polymer, Vue, Knockout
支持任何CSS庫, 例如 Bootstrap
簡單的API
CDN
不需要jQuery(但支持)
引入通過npm
$ npm install sortablejs --save
CDN
使用
var el = document.getElementById("items"); var sortable = Sortable.create(el);
您可以對任何列表及其子元素使用,而不僅僅是ul/li。這里是一個關于div的例子。
Optionsvar sortable = new Sortable(el, { group: "name", // or { name: "...", pull: [true, false, "clone", array], put: [true, false, array] } sort: true, // sorting inside list delay: 0, // time in milliseconds to define when the sorting should start touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event disabled: false, // Disables the sortable if set to true. store: null, // @see Store animation: 150, // ms, animation speed moving items when sorting, `0` — without animation easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples. handle: ".my-handle", // Drag handle selector within list items filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function) preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter` draggable: ".item", // Specifies which items inside the element should be draggable 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", swapThreshold: 1, // Threshold of the swap zone invertSwap: false, // Will always use inverted swap zone if set to true invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default) direction: "horizontal", // Direction of Sortable (will be detected automatically if not given) 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 bubbleScroll: true, // apply autoscroll to all parent elements, allowing for easier movement dragoverBubble: false, removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it 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.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) { // Example: https://jsbin.com/nawahef/edit?js,output 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 } });更多
更多使用方法請參考__官方使用示例__ https://sortablejs.github.io/Sortable
git倉庫地址https://github.com/SortableJS/Sortable
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102991.html
摘要:介紹是一款輕量級的拖放排序列表的插件雖然體積小,但是功能很強大下載地址官方特點支持觸屏設備和大部分瀏覽器以下的就不支持了,原因都懂得可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進行排序移動列表單元時有動畫支持拖放操作和可選擇 介紹 Sortable.js是一款輕量級的拖放排序列表的js插件(雖然體積小,但是功能很強大)下載地址:https://github.com/Ru...
閱讀 1837·2023-04-25 14:49
閱讀 3117·2021-09-30 09:47
閱讀 3101·2021-09-06 15:00
閱讀 2224·2019-08-30 13:16
閱讀 1436·2019-08-30 10:48
閱讀 2668·2019-08-29 15:11
閱讀 1287·2019-08-26 14:06
閱讀 1663·2019-08-26 13:30