Sort
Новый HTML-тег <cb-sort> в роли списка перемещаемых предметов.<cb-sort>
<div role="listitem">1</div>
<div role="listitem">2</div>
<div role="listitem">3</div>
<div role="listitem">4</div>
<div role="listitem">5</div>
<div role="listitem">6</div>
<div role="listitem">7</div>
<div role="listitem">8</div>
</cb-sort>1
2
3
4
5
6
7
8
Атрибуты
role=listitem
Перемещаемый или перетаскиваемый элемент.
data-sort-trigger
Переопределение реагирующих на перетаскивание элементов.
data-notrigger
Для элементов не реагирующих на перемещение.
submenu
Опции перемещения будут перенесены в подменю, освободив место для новых опций.
deletelistitem
Опция удаления предмета.
inactive
Отключить сортировку.
axis
Для вертикальных или горизонтальных списков: axis="x" — Перемещать только по горизонтали; axis="y" — Перемещать только по вертикали.
JavaScript
const sort = document.querySelector('cb-sort')sort.shuffle(array)
Перемешать предметы согласно индексам в массиве.
sort.shuffle([3, 2, 1, 0])sort.moveFromTo(indexFrom, indexTo)
Переместить предмет с одного места на другое.
sort.moveFromTo(2, 0)sort.cards
Предметы (listitem).
sort.menuElement
Меню.
sort.submenuElement
Подменю.
События
sortchange
Событие после перемещения предмета.
sort.addEventListener('sortchange', callback)openMenu
Событие открытия меню.
sort.addEventListener('openMenu', e => {
const {card, menuElement, submenuElement, currentIndex} = e.details
})deletelistitem
Событие удаления предмета.
sort.addEventListener('deletelistitem', e => {
const {item} = e.details
})setupMenu
Событие создания меню для добавления новых опций.
sort.addEventListener('setupMenu', e => {
const {menuElement, submenuElement} = e.details
})input
Событие перемещения предметов.
sort.addEventListener('input', e => {
const {cards, from, to} = e.details
})appendMenuButton
Событие добавления кнопки меню.
sort.addEventListener('appendMenuButton', e => {
const {card} = e.details
})Стили
.cb-sort-catcher
Прозрачная позиция под перетаскиваемым элементом.
.cb-sort-catcher-marker
Цветовой маркер под перетаскиваемым элементом.
.cb-sort-mover
Перетаскиваемый элемент.
.cb-sort-process {
transition: transform 120ms ease;
}
.cb-shuffle-process {
transition: transform 0.5s ease;
}