摘要:支持和任何库例如功能描述用于可重新排序的拖放列表的库。这里是一个关于的例子。更多更多使用方法请参考官方使用示例仓库地址
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
使用</>复制代码
</>复制代码
-
- item 1
-
- item 2
-
- item 3
-
</>复制代码
var el = document.getElementById("items");
var sortable = Sortable.create(el);
您可以对任何列表及其子元素使用,而不仅仅是ul/li。这里是一个关于div的例子。
Options</>复制代码
var 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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/102991.html
摘要:介绍是一款轻量级的拖放排序列表的插件虽然体积小,但是功能很强大下载地址官方特点支持触屏设备和大部分浏览器以下的就不支持了,原因都懂得可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序移动列表单元时有动画支持拖放操作和可选择 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https://github.com/Ru...
阅读 1891·2023-04-25 14:49
阅读 3163·2021-09-30 09:47
阅读 3193·2021-09-06 15:00
阅读 2265·2019-08-30 13:16
阅读 1482·2019-08-30 10:48
阅读 2712·2019-08-29 15:11
阅读 1333·2019-08-26 14:06
阅读 1710·2019-08-26 13:30