Sortable
v1.15.3
可排序是用于可重新排序拖放列表的JavaScript库。
演示：http：//sortablejs.github.io/sortable/
@types/sortablejs的打字稿定义使用NPM安装：
npm install sortablejs --save安装鲍尔：
bower install --save sortablejs导入您的项目：
// Default SortableJS
import Sortable from 'sortablejs' ;
// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js' ;
// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js' ;Cherrypick插件：
// Cherrypick extra plugins
import Sortable , { MultiDrag , Swap } from 'sortablejs' ;
Sortable . mount ( new MultiDrag ( ) , new Swap ( ) ) ;
// Cherrypick default plugins
import Sortable , { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js' ;
Sortable . mount ( new AutoScroll ( ) ) ; < ul id =" items " >
< li > item 1 </ li >
< li > item 2 </ li >
< li > item 3 </ li >
</ ul > var el = document . getElementById ( 'items' ) ;
var sortable = Sortable . create ( el ) ;您可以将任何元素用于列表及其元素，而不仅仅是ul / li 。这是div s的示例。
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
delayOnTouchOnly : false , // only delay if user is using touch
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
dataIdAttr : 'data-id' , // HTML attribute that is used by the `toArray()` method
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
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.
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 . oldDraggableIndex ; // element's old index within old parent, only counting draggable elements
evt . newDraggableIndex ; // element's new index within new parent, only counting draggable elements
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
// return true; — keep default insertion point based on the direction
// return void; — keep default insertion point based on the direction
} ,
// 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
}
} ) ; group选项要将元素从一个列表中拖动到另一个列表中，两个列表都必须具有相同的group值。您还可以定义列表是否可以放弃，放弃并保留副本（ clone ）并接收元素。
String - 组名称true|false|["foo", "bar"]|'clone'|function - 从列表中移动的能力。 clone - 复制项目，而不是移动。或可以放入元素的一系列组名称。默认为true 。true|false|["baz", "qux"]|function - 是否可以从其他列表中添加元素，还是可以添加元素的组名称数组。boolean - 转到另一个列表后，将克隆的元素恢复为初始位置。演示：
pull put使用复杂逻辑revertClone: true sort选项允许在列表中进行排序。
演示：https：//jsbin.com/jayedig/edit?js,utput
delay选项以毫秒的时间定义分类何时开始。不幸的是，由于浏览器的限制，如果本机拖放和下降，IE或边缘不可能延迟。
演示：https：//jsbin.com/zosiwah/edit?js，output
delayOnTouchOnly选项仅当用户使用触摸时（例如，在移动设备上）是否应应用延迟。在任何其他情况下都不会延迟。默认为false 。
swapThreshold选项掉期区域将占据目标的目标百分比，因为浮子在0到1之间。
阅读更多
演示：http：//sortablejs.github.io/sortable#thresholds
invertSwap选项设置为true以将交换区设置为目标的侧面，以效果“在”项目之间进行排序。
阅读更多
演示：http：//sortablejs.github.io/sortable#thresholds
invertedSwapThreshold选项倒交换区域将占据目标的目标百分比，因为浮动在0到1之间。如果没有给出，将默认为swapThreshold 。
阅读更多
direction选项可以分类的方向可以将其设置为'vertical' ， 'horizontal'或一个函数，只要目标被拖放到目标时。必须返回'vertical'或'horizontal' 。
阅读更多
垂直列表的方向检测示例，其中包括完整列和半列元素：
Sortable . create ( el , {
direction : function ( evt , target , dragEl ) {
if ( target !== null && target . className . includes ( 'half-column' ) && dragEl . className . includes ( 'half-column' ) ) {
return 'horizontal' ;
}
return 'vertical' ;
}
} ) ; touchStartThreshold选项此选项类似于fallbackTolerance选项。
设置delay选项时，一些具有非常敏感的触摸显示的手机，例如三星Galaxy S8，即使您的手指不动时也会发射不需要的触摸事件事件，从而导致无法触发。
此选项设置了在取消延迟排序之前必须发生的最小指针运动。
3至5之间的值很好。
disabled选项如果设置为true则禁用可排序。
演示：https：//jsbin.com/sewokud/edit?js,utput
var sortable = Sortable . create ( list ) ;
document . getElementById ( "switcher" ) . onclick = function ( ) {
var state = sortable . option ( "disabled" ) ; // get
sortable . option ( "disabled" , ! state ) ; // set
} ; handle选项要使列表项目可拖动，可分类的禁用用户的文本选择。这并不总是可取的。要允许文本选择，请定义一个拖动处理程序，这是每个列表元素的区域，可以将其拖动。
演示：https：//jsbin.com/numakuh/edit?html，js和output
Sortable . create ( el , {
handle : ".my-handle"
} ) ; < ul >
< li > < span class =" my-handle " > :: </ span > list item text one
< li > < span class =" my-handle " > :: </ span > list item text two
</ ul > . my-handle {
cursor : move;
cursor : -webkit-grabbing;
}filter选项 Sortable . create ( list , {
filter : ".js-remove, .js-edit" ,
onFilter : function ( evt ) {
var item = evt . item ,
ctrl = evt . target ;
if ( Sortable . utils . is ( ctrl , ".js-remove" ) ) { // Click on remove button
item . parentNode . removeChild ( item ) ; // remove sortable item
}
else if ( Sortable . utils . is ( ctrl , ".js-edit" ) ) { // Click on edit link
// ...
}
}
} ) ghostClass选项drop占位符的班级名称（默认sortable-ghost ）。
演示：https：//jsbin.com/henuyiw/edit?css，,, output
. ghost {
opacity : 0.4 ;
} Sortable . create ( list , {
ghostClass : "ghost"
} ) ; chosenClass选项所选项目的类名（默认sortable-chosen ）。
演示：https：//jsbin.com/hoqufox/edit?css，js，output
. chosen {
color : # fff ;
background-color : # c00 ;
} Sortable . create ( list , {
delay : 500 ,
chosenClass : "chosen"
} ) ; forceFallback选项如果设置为true ，即使我们使用的是HTML5浏览器，也将使用非HTML5浏览器的后备。这使我们有可能在较新的浏览器中测试较旧浏览器的行为，或者在台式机，移动设备和旧浏览器之间使拖放掉落更加一致。
最重要的是，后备始终生成该DOM元素的副本，并附加了选项中定义的类fallbackClass 。此行为控制此“拖动”元素的外观。
演示：https：//jsbin.com/sibiput/edit?html.css，js，output
fallbackTolerance选项模拟本地阻力阈值。在像素中指定鼠标应移动多远，然后将其视为阻力。如果项目也可以像在链接列表中一样可单击，则很有用。
当用户单击可排序的元素时，在按下时间和发布时间之间，您的手也不少见。仅当您将指针移至某个公差时，才会启动拖动，以免每次点击时都会意外开始拖动。
3至5可能是好值。
dragoverBubble选项如果设置为true ，则Dragover事件将在父级分类中冒泡。在后备和本地Dragover事件上都有工作。默认情况下，它是错误的，但是可排序只会在将元素插入到父上，或者可以插入父级可分类，但不是在该特定时间（由于动画等）插入事件（等） 。
自1.8.0以来，您可能希望将此选项作为false。在1.8.0之前，嵌套排序物品可能需要true 。
removeCloneOnHide选项如果设置为false ，则通过将其CSS display属性设置为none 。默认情况下，此选项是true ，含义可排序将在应该隐藏时从DOM中删除克隆元素。
emptyInsertThreshold选项（以像素为单位）鼠标必须与空排序相处，同时拖动拖动元素才能插入可排序。默认为5 。设置为0以禁用此功能。
演示：https：//jsbin.com/becavoj/edit?js,utput
此选项的一种替代方法是在列表中设置填充物时。
例如：
ul : empty {
padding-bottom : 20 px ;
}警告：for :empty工作，它必须内部没有节点（甚至是文本）。
演示：https：//jsbin.com/yunakeg/edit?html.css，js，output
HTMLElement - 列表，其中移动元素HTMLElement - 上一个列表HTMLElement - 拖动元素HTMLElementNumber|undefined - 父母内的旧索引Number|undefined - 父母内的新索引Number|undefined - 父级的旧索引，仅计数可拖动元素Number|undefined - 父母内的新索引，仅计数可拖动元素String|Boolean|undefined - 拉动模式如果拖入另一个可排序（ "clone" ， true或false ），否则未定义move事件对象HTMLElementHTMLElementHTMLElementDOMRectHTMLElement - 已引导的元素DOMRectBoolean - true ，如果要在目标之后插入元素（或者以前为false ）String [，值： * ]）： *获取或设置选项。
HTMLElement [，Selector： String ]）： HTMLElement|null对于集合中的每个元素，通过测试元素本身并穿过DOM树中的祖先来获取与选择器匹配的第一个元素。
String[]将可排序的项目data-id （ dataIdAttr选项）序列化为字符串。
String[] ，UseAnimation： Boolean ）根据数组对元素进行分类。
var order = sortable . toArray ( ) ;
sortable . sort ( order . reverse ( ) , true ) ; // apply 保存当前排序（请参阅商店）
完全删除可排序功能。
保存和恢复类型。
< ul >
< li data-id =" 1 " > order </ li >
< li data-id =" 2 " > save </ li >
< li data-id =" 3 " > restore </ li >
</ ul > Sortable . create ( el , {
group : "localStorage-example" ,
store : {
/**
* Get the order of elements. Called once during initialization.
* @param {Sortable} sortable
* @returns {Array}
*/
get : function ( sortable ) {
var order = localStorage . getItem ( sortable . options . group . name ) ;
return order ? order . split ( '|' ) : [ ] ;
} ,
/**
* Save the order of elements. Called onEnd (when the item is dropped).
* @param {Sortable} sortable
*/
set : function ( sortable ) {
var order = sortable . toArray ( ) ;
localStorage . setItem ( sortable . options . group . name , order . join ( '|' ) ) ;
}
}
} )演示：https：//jsbin.com/visimub/edit?html，js，output
<!-- Latest compiled and minified CSS -->
< link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css "/>
<!-- Latest Sortable -->
< script src =" http://SortableJS.github.io/Sortable/Sortable.js " > </ script >
<!-- Simple List -->
< ul id =" simpleList " class =" list-group " >
< li class =" list-group-item " > This is < a href =" http://SortableJS.github.io/Sortable/ " > Sortable </ a > </ li >
< li class =" list-group-item " > It works with Bootstrap... </ li >
< li class =" list-group-item " > ...out of the box. </ li >
< li class =" list-group-item " > It has support for touch devices. </ li >
< li class =" list-group-item " > Just drag some elements around. </ li >
</ ul >
< script >
// Simple list
Sortable . create ( simpleList , { /* options */ } ) ;
</ script >HTMLElement [，options： Object ]）： Sortable创建新实例。
Sortable主动排序实例。
HTMLElement被拖动的元素。
HTMLElement幽灵元素。
HTMLElement克隆元素。
HTMLElement ）： Sortable在元素上获取可排序实例。
...SortablePlugin|SortablePlugin[] ）将插件安装到可排序。
:HTMLElement ，事件:String ，FN :Function ） - 附加事件处理程序功能:HTMLElement ，事件:String ，FN :Function ） - 删除事件处理程序:HTMLElement ） :Object - 获取所有CSS属性的值:HTMLElement ，prop :String ） :Mixed - 获取样式属性的价值:HTMLElement ，prop :String ，value :String ） - 设置一个CSS属性:HTMLElement ，props :Object ） - 设置更多CSS属性:HTMLElement ，tagname :String [，iterator :Function ]） :Array - 按标签名称获取元素:Mixed ，FN :Function ） :Function - 掌握一个函数并返回一个新的，该功能将始终具有特定的上下文:HTMLElement ，selector :String ） :Boolean - 检查当前匹配的元素与选择器:HTMLElement ，selector :String [，ctx :HTMLElement ]）） :HTMLElement|Null对于集合中的每个元素，获取与选择器匹配的第一个元素，通过测试元素本身并通过其祖先通过dom中的DOM中的祖先进行穿越树:HTMLElement ） :HTMLElement - 创建一组匹配元素的深层副本:HTMLElement ，name :String ，state :Boolean ） - 从每个元素中添加或删除一个类:HTMLElement ） :String - 自动检测元素的方向为'vertical'或'horizontal':HTMLElement ，selector :String ） :Number - 其父元素的元素索引，用于所选元素集:HTMLElement ，childnum :Number ，选项:Object ，包括ragel :Boolean ）： HTMLElement - 在可排序的实例中以可拖动元素的给定索引获取可拖动元素:String - Explipo属性名称用于内部用途，sortableListElement [Exphiendo]返回该elemenet的可排序实例 <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src =" https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js " > </ script >请阅读。
由于所有贡献的人，该项目的存在。 [贡献]。
成为财务贡献者，并帮助我们维持社区。 [贡献]
与您的组织一起支持这个项目。您的徽标将在此处显示您网站的链接。 [贡献]
特此免费授予任何获得此软件副本和相关文档文件（“软件”）的人，以无限制处理该软件，包括无限制，使用，复制，修改，合并的权利，发布，分发，分布和/或出售该软件的副本，并允许提供该软件的人，但要遵守以下条件：
上述版权通知和此许可通知应包含在软件的所有副本或大量部分中。
该软件是“原样”提供的，没有任何形式的明示或暗示保证，包括但不限于适销性，特定目的的适用性和非侵权的保证。在任何情况下，作者或版权持有人均不应对任何索赔，损害赔偿或其他责任责任，无论是在合同，侵权或其他方面的诉讼中，与软件或与软件或使用或其他交易有关的诉讼或其他责任软件。
