表格拖拽SortableJS
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
<!-- jsDelivr :: Sortable :: Latest (/package/npm/sortablejs) -->
<script src="/npm/sortablejs@latest/Sortable.min.js"></script>
使⽤
<ul id="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
var el = ElementById('items');
var sortable = ate(el);
您可以对任何列表及其⼦元素使⽤，⽽不仅仅是ul/li。这⾥是⼀个关于div的。
tee
Options
var sortable =new Sortable(el,{
group:"name",// or { name: "...", pull: [true, fal, 'clone', array], put: [true, fal, array] }
sort:true,// sorting inside list
delay:0,// time in milliconds to define when the sorting should start
touchStartThreshold:0,// px, how many pixels the point should move before cancelling a delayed drag event
disabled:fal,// Disables the sortable if t to true.
store:null,// @e Store
animation:150,// ms, animation speed moving items when sorting, `0` — without animation
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 / for examples.
西安培华学院地址
handle:".my-handle",// Drag handle lector 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
chonClass:"sortable-chon",// Class name for the chon item
dragClass:"sortable-drag",// Class name for the dragging item
dataIdAttr:'data-id',
英语二大纲swapThreshold:1,// Threshold of the swap zone
invertSwap:fal,// Will always u inverted swap zone if t to true
invertedSwapThreshold:1,// Threshold of the inverted swap zone (will be t to swapThreshold value by default)
direction:'horizontal',// Direction of Sortable (will be detected automatically if not given)
forceFallback:fal,// 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
shieldsfallbackOnBody:fal,// Appends the cloned DOM Element into the Document's Body
fallbackTolerance:0,// Specify in pixels how far the mou should move before it's considered as a drag.
scroll:true,// or HTMLElement
scrollFn:function(offtX, offtY, originalEvent, touchEvt, hoverTargetEl){...},// if you have custom scrollbar scrollFn may be ud for autoscrolling scrollSensitivity:30,// px, how near the mou must be to an edge to start scrolling.
scrollSpeed:10,// px
bubbleScroll:true,// apply autoscroll to all parent elements, allowing for easier movement
dragoverBubble:fal,
removeCloneOnHide:true,// Remove the clone element when it is not showing, rather than just hiding it
emptyInrtThreshold:5,// px, distance mou must be from empty sortable to inrt drag element into it
tData:function(/** DataTransfer */dataTransfer,/** HTMLElement*/dragEl){
dataTransfer.tData('Text', Content);// `dataTransfer` object of HTML5 DragEvent
},
// Element is chon
onChoo:function(/**Event*/evt){
evt.oldIndex;// element index within parent
},
// Element is unchon
onUnchoo: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
新航道培训学校
<;// target list
evt.from;// previous list
evt.oldIndex;// element's old index within old parent
evt.clone // the clone element
evt.pullMode;// when item is in another sortable: `"clone"` if cloning, `true` if moving
},
keg// Element is dropped into the list from another list
onAdd:function(/**Event*/evt){
// same properties as onEnd
// 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
photo booth
onFilter:function(/**Event*/evt){
var itemEl = evt.item;// HTMLElement receiving the `moudown|tapstart` event.
advertir
},guts是什么意思
// Event when you move an item in the list or between lists
onMove:function(/**Event*/evt,/**Event*/originalEvent){
// Example: /nawahef/edit?js,output
evt.dragged;// dragged HTMLElement
evt.draggedRect;// DOMRect {left, top, right, bottom}
evt.willInrtAfter;// Boolean that is true if Sortable will inrt drag element after target by default originalEvent.clientY;// mou position
// return fal; — for cancel
// return -1; — inrt before target
// return 1; — inrt 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){
}
});
更多
