Sortable
v1.15.3
Sortable adalah pustaka JavaScript untuk daftar drag-and-drop yang dapat dipesan ulang.
Demo: http://sortablejs.github.io/sortable/
@types/sortablejsInstal dengan NPM:
npm install sortablejs --saveInstal dengan Bower:
bower install --save sortablejsImpor ke proyek Anda:
// 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' ;Plugin 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 ) ; Anda dapat menggunakan elemen apa pun untuk daftar dan elemennya, bukan hanya ul / li . Berikut adalah contoh dengan 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 Untuk menyeret elemen dari satu daftar ke daftar lain, kedua daftar harus memiliki nilai group yang sama. Anda juga dapat menentukan apakah daftar dapat memberikan, memberi dan menyimpan salinan ( clone ), dan menerima elemen.
String - Nama Gruptrue|false|["foo", "bar"]|'clone'|function - kemampuan untuk pindah dari daftar. clone - Salin item, daripada bergerak. Atau serangkaian nama grup yang dapat dimasukkan elemen. Default ke true .true|false|["baz", "qux"]|function - apakah elemen dapat ditambahkan dari daftar lain, atau array nama grup dari mana elemen dapat ditambahkan.boolean - Revert Cloned Element ke posisi awal setelah pindah ke daftar lain.Demo:
pull dan putrevertClone: true sort opsiIzinkan penyortiran dalam daftar.
Demo: https://jsbin.com/jayedig/edit?js,output
delayWaktu dalam milidetik untuk menentukan kapan penyortiran harus dimulai. Sayangnya, karena pembatasan browser, penundaan tidak dimungkinkan pada IE atau Edge dengan Drag & Drop asli.
Demo: https://jsbin.com/zosiwah/Edit?js,output
delayOnTouchOnly Apakah penundaan harus diterapkan hanya jika pengguna menggunakan sentuhan (mis. Pada perangkat seluler). Tidak ada penundaan yang akan diterapkan dalam kasus lain. Default ke false .
swapThreshold Persentase target yang akan diambil zona swap, sebagai pelampung antara 0 dan 1 .
Baca selengkapnya
Demo: http://sortablejs.github.io/sortable#thresholds
invertSwap Setel ke true untuk mengatur zona swap ke sisi target, untuk efek penyortiran "di antara" item.
Baca selengkapnya
Demo: http://sortablejs.github.io/sortable#thresholds
invertedSwapThreshold Persentase target yang akan diambil zona swap terbalik, sebagai pelampung antara 0 dan 1 . Jika tidak diberikan, akan default untuk swapThreshold .
Baca selengkapnya
direction Arah yang harus diurutkan. Dapat diurutkan. Dapat diatur ke 'vertical' , 'horizontal' , atau fungsi, yang akan dipanggil setiap kali target terseret. Harus mengembalikan 'vertical' atau 'horizontal' .
Baca selengkapnya
Contoh deteksi arah untuk daftar vertikal yang mencakup elemen kolom lengkap dan setengah kolom:
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 Opsi ini mirip dengan opsi fallbackTolerance .
Ketika opsi delay diatur, beberapa ponsel dengan tampilan sentuh yang sangat sensitif seperti Samsung Galaxy S8 akan menembakkan acara TouchMove yang tidak diinginkan bahkan ketika jari Anda tidak bergerak, menghasilkan jenis yang tidak memicu.
Opsi ini menetapkan gerakan pointer minimum yang harus terjadi sebelum penyortiran yang tertunda dibatalkan.
Nilai antara 3 hingga 5 bagus.
disabled Menonaktifkan yang dapat diurutkan jika diatur ke true .
Demo: https://jsbin.com/sewokud/edit?js,output
var sortable = Sortable . create ( list ) ;
document . getElementById ( "switcher" ) . onclick = function ( ) {
var state = sortable . option ( "disabled" ) ; // get
sortable . option ( "disabled" , ! state ) ; // set
} ; handleUntuk membuat item daftar yang dapat diseret, dapat diurutkan menonaktifkan pemilihan teks oleh pengguna. Itu tidak selalu diinginkan. Untuk mengizinkan pemilihan teks, tentukan handler drag, yang merupakan area dari setiap elemen daftar yang memungkinkannya diseret.
Demo: 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 Nama kelas untuk drop placeholder (default sortable-ghost ).
Demo: https://jsbin.com/henuyiw/Edit?cssss.js,output
. ghost {
opacity : 0.4 ;
} Sortable . create ( list , {
ghostClass : "ghost"
} ) ; chosenClass Nama kelas untuk item yang dipilih ( sortable-chosen ).
Demo: https://jsbin.com/hoqufox/edit?csss,js,output
. chosen {
color : # fff ;
background-color : # c00 ;
} Sortable . create ( list , {
delay : 500 ,
chosenClass : "chosen"
} ) ; forceFallback Jika diatur ke true , fallback untuk browser non HTML5 akan digunakan, bahkan jika kita menggunakan browser HTML5. Ini memberi kita kemungkinan untuk menguji perilaku untuk browser yang lebih tua bahkan di browser yang lebih baru, atau membuat drag 'n drop terasa lebih konsisten antara desktop, browser seluler dan lama.
Selain itu, fallback selalu menghasilkan salinan elemen DOM itu dan menambahkan fallbackClass kelas yang ditentukan dalam opsi. Perilaku ini mengontrol tampilan elemen 'diseret' ini.
Demo: https://jsbin.com/sibiput/edit?html,csss, js,output
fallbackToleranceMeniru ambang seret asli. Tentukan dalam piksel seberapa jauh mouse harus bergerak sebelum dianggap sebagai hambatan. Berguna jika item juga dapat diklik seperti dalam daftar tautan.
Ketika pengguna mengklik di dalam elemen yang dapat diurutkan, tidak jarang tangan Anda bergerak sedikit di antara waktu Anda menekan dan waktu Anda melepaskan. Seret hanya dimulai jika Anda memindahkan pointer melewati toleransi tertentu, sehingga Anda tidak secara tidak sengaja mulai menyeret setiap kali Anda mengklik.
3 hingga 5 mungkin adalah nilai yang baik.
dragoverBubble Jika diatur ke true , acara Dragover akan menggelembung ke Parent Sortables. Bekerja pada acara Fallback dan Native Dragover. Secara default, itu salah, tetapi yang dapat diurutkan hanya akan berhenti menggelembungkan peristiwa setelah elemen telah dimasukkan ke dalam orang tua yang dapat diurutkan, atau dapat dimasukkan ke dalam orang tua yang dapat diurutkan, tetapi tidak pada waktu tertentu (karena animasi, dll) .
Sejak 1.8.0, Anda mungkin ingin meninggalkan opsi ini sebagai salah. Sebelum 1.8.0, mungkin perlu true agar sortable bersarang untuk bekerja.
removeCloneOnHide Jika diatur ke false , klon disembunyikan dengan memiliki properti display CSS diatur ke none . Secara default, opsi ini true , artinya diurutkan akan menghapus elemen kloning dari DOM ketika seharusnya disembunyikan.
emptyInsertThreshold Jarak (dalam piksel) mouse harus dari yang kosong yang dapat diurutkan sambil menyeret agar elemen seret dimasukkan ke dalam penyortiran yang dapat diurutkan. Default ke 5 . Diatur ke 0 untuk menonaktifkan fitur ini.
Demo: https://jsbin.com/becavoj/edit?js,output
Alternatif untuk opsi ini adalah mengatur bantalan pada daftar Anda saat kosong.
Misalnya:
ul : empty {
padding-bottom : 20 px ;
} PERINGATAN: Untuk :empty untuk bekerja, ia harus tidak memiliki simpul di dalam (bahkan teks satu).
Demo: https://jsbin.com/yunakeg/Edit?html,csss, js,output
HTMLElement - daftar, di mana elemen bergerakHTMLElement - daftar sebelumnyaHTMLElement - elemen diseretHTMLElementNumber|undefined - indeks lama dalam indukNumber|undefined - Indeks Baru Dalam Orang TuaNumber|undefined - indeks lama di dalam induk, hanya menghitung elemen yang dapat diseretNumber|undefined - Indeks baru dalam induk, hanya menghitung elemen yang dapat diseretString|Boolean|undefined - Mode tarik jika menyeret ke sortir lain ( "clone" , true , atau false ), jika tidak tidak terdefinisi move objek acaraHTMLElementHTMLElementHTMLElementDOMRectHTMLElement - Elemen yang dipanduDOMRectBoolean - true jika elemen akan dimasukkan setelah target (atau false jika sebelumnya)String [, nilai: * ]): *Dapatkan atau atur opsi.
HTMLElement [, selector: String ]): HTMLElement|nullUntuk setiap elemen dalam set, dapatkan elemen pertama yang cocok dengan pemilih dengan menguji elemen itu sendiri dan melintasi nenek moyangnya di pohon DOM.
String[] Serialisasi item sortable data-id (opsi dataIdAttr ) ke dalam array string.
String[] , useanimation: Boolean )Mengurutkan elemen sesuai dengan array.
var order = sortable . toArray ( ) ;
sortable . sort ( order . reverse ( ) , true ) ; // apply Simpan penyortiran saat ini (lihat toko)
Menghapus fungsionalitas yang dapat diurutkan sepenuhnya.
Menyimpan dan memulihkan semacam itu.
< 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 ( '|' ) ) ;
}
}
} )Demo: 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 [, opsi: Object ]): SortableBuat contoh baru.
SortableInstance yang dapat diurutkan aktif.
HTMLElementElemen sedang diseret.
HTMLElementElemen Hantu.
HTMLElementElemen klon.
HTMLElement ): SortableDapatkan contoh yang dapat diurutkan pada suatu elemen.
...SortablePlugin|SortablePlugin[] )Memasang plugin untuk diurutkan.
:HTMLElement , Event :String , Fn :Function ) - Lampirkan fungsi event handler:HTMLElement , Event :String , Fn :Function ) - Hapus event handler:HTMLElement ) :Object - Dapatkan nilai semua properti CSS:HTMLElement , Prop :String ) :Mixed - Dapatkan nilai properti gaya:HTMLElement , Prop :String , Value :String ) - Tetapkan satu properti CSS:HTMLElement , Props :Object ) - Tetapkan lebih banyak properti CSS:HTMLElement , TagName :String [, Iterator :Function ]) :Array - Dapatkan elemen dengan nama tag:Mixed , fn :Function ) :Function - mengambil fungsi dan mengembalikan yang baru yang akan selalu memiliki konteks tertentu:HTMLElement , Selector :String ) :Boolean - Periksa set elemen yang cocok saat ini terhadap pemilih:HTMLElement , pemilih :String [, ctx :HTMLElement ]) :HTMLElement|Null - untuk setiap elemen dalam set, dapatkan elemen pertama yang cocok dengan pemilih dengan menguji elemen itu sendiri dan melintasi melalui nenek moyangnya di DOM pohon:HTMLElement ) :HTMLElement - Buat salinan mendalam dari set elemen yang cocok:HTMLElement , name :String , state :Boolean ) - tambahkan atau hapus satu kelas dari setiap elemen:HTMLElement ) :String - Secara otomatis mendeteksi arah elemen sebagai 'vertical' atau 'horizontal':HTMLElement , Selector :String ) :Number - Indeks elemen dalam induknya untuk set elemen yang dipilih:HTMLElement , childnum :Number , options :Object , includeRagel :Boolean ): HTMLElement - dapatkan elemen yang dapat diseret pada indeks elemen yang dapat diseret dalam instance yang dapat diurutkan:String - Expando Name Properti untuk Penggunaan Internal, SortableListElement [Expando] Mengembalikan contoh yang dapat diurutkan dari Elemenet itu <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src =" https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js " > </ script >Tolong, baca ini.
Proyek ini ada berkat semua orang yang berkontribusi. [Menyumbang].
Menjadi kontributor keuangan dan bantu kami mempertahankan komunitas kami. [Menyumbang]
Dukung proyek ini dengan organisasi Anda. Logo Anda akan muncul di sini dengan tautan ke situs web Anda. [Menyumbang]
Izin dengan ini diberikan, gratis, kepada siapa pun yang mendapatkan salinan perangkat lunak ini dan file dokumentasi terkait ("Perangkat Lunak"), untuk menangani perangkat lunak tanpa pembatasan, termasuk tanpa batasan hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , menerbitkan, mendistribusikan, sublisense, dan/atau menjual salinan perangkat lunak, dan untuk mengizinkan orang -orang yang dilengkapi dengan perangkat lunak untuk melakukannya, tunduk pada kondisi berikut:
Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus dimasukkan dalam semua salinan atau bagian substansial dari perangkat lunak.
Perangkat lunak ini disediakan "sebagaimana adanya", tanpa jaminan apa pun, tersurat maupun tersirat, termasuk tetapi tidak terbatas pada jaminan dapat diperjualbelikan, kebugaran untuk tujuan tertentu dan nonpringement. Dalam hal apa pun penulis atau pemegang hak cipta tidak akan bertanggung jawab atas klaim, kerusakan atau tanggung jawab lainnya, baik dalam tindakan kontrak, gugatan atau sebaliknya, timbul dari, di luar atau sehubungan dengan perangkat lunak atau penggunaan atau transaksi lain dalam PERANGKAT LUNAK.
