可排序是用於可重新排序拖放列表的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
- 拖動元素HTMLElement
Number|undefined
- 父母內的舊索引Number|undefined
- 父母內的新索引Number|undefined
- 父級的舊索引,僅計數可拖動元素Number|undefined
- 父母內的新索引,僅計數可拖動元素String|Boolean|undefined
- 拉動模式如果拖入另一個可排序( "clone"
, true
或false
),否則未定義move
事件對象HTMLElement
HTMLElement
HTMLElement
DOMRect
HTMLElement
- 已引導的元素DOMRect
Boolean
- 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 >
請閱讀。
由於所有貢獻的人,該項目的存在。 [貢獻]。
成為財務貢獻者,並幫助我們維持社區。 [貢獻]
與您的組織一起支持這個項目。您的徽標將在此處顯示您網站的鏈接。 [貢獻]
特此免費授予任何獲得此軟件副本和相關文檔文件(“軟件”)的人,以無限制處理該軟件,包括無限制,使用,複製,修改,合併的權利,發布,分發,分佈和/或出售該軟件的副本,並允許提供該軟件的人,但要遵守以下條件:
上述版權通知和此許可通知應包含在軟件的所有副本或大量部分中。
該軟件是“原樣”提供的,沒有任何形式的明示或暗示保證,包括但不限於適銷性,特定目的的適用性和非侵權的保證。 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE軟體.