Sortable
v1.15.3
Sortable-это библиотека JavaScript для перезапорядоченных списков перетаскивания.
Демо: http://sortablejs.github.io/sortable/
@types/sortablejsУстановите с помощью NPM:
npm install sortablejs --saveУстановить с помощью Bower:
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 и putrevertClone: true sortРазрешить сортировку внутри списка.
Демо: https://jsbin.com/jayedig/edit?js, output
delayВремя в миллисекундах, чтобы определить, когда сортировка должна начаться. К сожалению, из -за ограничений браузера задержка невозможна IE или Edge с нативным перетаскиванием.
Демо: https://jsbin.com/zosiwah/edit?js,Output
delayOnTouchOnly варианта Должен ли задержка применяться только в том случае, если пользователь использует Touch (например, на мобильном устройстве). В любом другом случае не будет применена задержка. По умолчанию false .
swapThreshold опмана Процент цели, которую займет зона свопа, как поплавок от 0 до 1 .
Читать далее
Демо: http://sortablejs.github.io/sortable#thresholds
invertSwap Установите true , чтобы установить зону свопа на стороны цели, для эффекта сортировки »между« элементами ».
Читать далее
Демо: http://sortablejs.github.io/sortable#thresholds
invertedSwapThreshold Option Процент цели, которую займет перевернутая зона подкачки, в качестве поплавка от 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 , некоторые телефоны с очень чувствительными сенсорными дисплеями, такими как Samsung Galaxy S8, будут стрелять в нежелательные события Touchmove, даже когда ваш палец не движется, что приведет к тому, что не запускается.
Эта опция устанавливает минимальное движение указателя, которое должно произойти до отмены задержки сортировки.
Значения от 3 до 5 хороши.
disabled параметры Отключает сортируемый, если установить на true .
Демо: 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
} ; 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 Placeholder (по умолчанию sortable-ghost ).
Демонстрация: https://jsbin.com/henuyiw/edit?css, JS,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 , будет использоваться запасная сторона браузера Non HTML5, даже если мы используем браузер HTML5. Это дает нам возможность проверить поведение для более старых браузеров даже в более новом браузере или заставить Drag 'N Drop чувствовать себя более последовательным между настольными, мобильными и старыми браузерами.
Кроме того, запасная сторона всегда генерирует копию этого элемента DOM и добавляет Class fallbackClass определенный в опциях. Это поведение контролирует внешний вид этого «перетаскиваемого» элемента.
Демонстрация: https://jsbin.com/sibiput/edit?html,css, js,Output
fallbackToleranceЭмулирует родной порог перетаскивания. Укажите в пикселях, как далеко мышь должна перемещаться, прежде чем она будет считаться сопротивлением. Полезно, если элементы также кликируются, как в списке ссылок.
Когда пользователь щелкнет внутри сортируемого элемента, ваша рука нередко перемещается между тем, как вы нажимаете, и временем выпуска. Перетаскивание начинается только в том случае, если вы перемещаете указатель мимо определенной терпимости, чтобы вы не начали случайно перетаскиваться каждый раз, когда нажимаете.
От 3 до 5, вероятно, хорошие ценности.
dragoverBubble Если установлено в true , событие Dragover будет пузыриться до сортируемых родителей. Работает как на запасной, так и на местном драгверном мероприятии. По умолчанию он ложный, но сортируемый остановит пузырьковое событие только после того, как элемент будет вставлен в родительский сортируемый или может быть вставлен в родительский сортируемый, но не в такое конкретное время (из -за анимации и т. Д.) Полем
С 1.8.0 вы, вероятно, захотите оставить эту опцию как ложную. До 1.8.0 это может быть true для вложенных сортируемых сортируемых.
removeCloneOnHide опция Если установить на false , клон скрыт, none свой свойство display CSS. По умолчанию эта опция true , означающая сортируемая сортировка удалит клонированный элемент из DOM, когда он должен быть скрыт.
emptyInsertThreshold Расстояние (в пикселях) мышь должна быть из пустой сортируемой сортировки при перетаскивании для того, чтобы элемент перетаскивания был вставлен в это сортируемое. По умолчанию 5 . Установите на 0 чтобы отключить эту функцию.
Демо: https://jsbin.com/becavoj/edit?js,Output
Альтернативой этой опции было бы установить накладку в ваш список, когда он пуст.
Например:
ul : empty {
padding-bottom : 20 px ;
} ПРЕДУПРЕЖДЕНИЕ: Ибо :empty для работы, у него не должно быть узела (даже текст один).
Демонстрация: https://jsbin.com/yunakeg/edit?html,cs, 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 [, value: * ]): *Получить или установить опцию.
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 [, опции: Object ]): SortableСоздайте новый экземпляр.
SortableАктивный сортируемый экземпляр.
HTMLElementЭлемент перетаскивается.
HTMLElementПризрак элемент.
HTMLElementЭлемент клона.
HTMLElement ): SortableПолучите сортируемый экземпляр на элементе.
...SortablePlugin|SortablePlugin[] )Укажите плагин для сортировки.
:HTMLElement , Event :String , FN :Function ) - Прикрепите функцию обработчика событий:HTMLElement , Event :String , FN :Function ) - Удалите обработчик событий:HTMLElement ) :Object - Получить значения всех свойств CSS:HTMLElement , PROP :String ) :Mixed - Получите значение свойств стиля:HTMLElement , PROP :String , значение :String ) - установите одно свойства CSS:HTMLElement , Reps :Object ) - Установите больше свойств CSS:HTMLElement , tagname :String [, iterator :Function ]) :Array - получить элементы по имени тега:Mixed , FN :Function ) :Function - принимает функцию и возвращает новый, который всегда будет иметь определенный контекст:HTMLElement , selector :String ) :Boolean - проверьте текущий набор элементов против селектора:HTMLElement , selecter :String [, ctx :HTMLElement ]) :HTMLElement|Null - Для каждого элемента в наборе получите первый элемент, который соответствует селектору, проверяя сам элемент и пройдя через его предки в DOM дерево:HTMLElement ) :HTMLElement - создайте глубокую копию набора соответствующих элементов:HTMLElement , имя :String , State :Boolean ) - Добавьте или удалите один класс из каждого элемента:HTMLElement ) :String - автоматически обнаруживает направление элемента как 'vertical' или 'horizontal':HTMLElement , селектор :String ) :Number - индекс элемента в его родителе для выбранного набора элементовHTMLElement :HTMLElement , Childnum :Number , опции :Object , :Boolean:String - Имя свойства Expando для внутреннего использования, SortalleLieSelement [Expando] возвращает сортируемый экземпляр этого Elemenet <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src =" https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js " > </ script >Пожалуйста, прочитайте это.
Этот проект существует благодаря всем людям, которые вносят свой вклад. [Способствовать].
Станьте финансовым участником и помогите нам поддерживать наше сообщество. [Способствовать]
Поддержите этот проект вашей организацией. Ваш логотип будет отображаться здесь со ссылкой на ваш сайт. [Способствовать]
Настоящее разрешение предоставляется бесплатно любому лицу, получающему копию этого программного обеспечения и связанные с ними файлы документации («Программное обеспечение»), для работы в программном обеспечении без ограничений, включая, помимо прочего, права на использование, копирование, изменение, объединение , публиковать, распространять, сублиценс и/или продавать копии программного обеспечения и разрешить лицам, которым предоставлено программное обеспечение, при условии следующих условий:
Вышеуказанное уведомление об авторском праве и это уведомление о разрешении должно быть включено во все копии или существенные части программного обеспечения.
Программное обеспечение предоставляется «как есть», без гарантии любого рода, явного или подразумеваемого, включая, помимо прочего, гарантии товарной пригодности, пригодности для определенной цели и несоответствия. Ни в коем случае не будут нести ответственность авторов или владельцев авторских прав за любые претензии, ущерб или другую ответственность, будь то в действии контракта, деликте или иным образом, возникающим из или в связи с программным обеспечением или использования или других сделок в ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ.
