Slip.js - простий список з сортуванням і видаленням свайпамі.

Відео: Настроювані списки сортування

Всім привіт! Сьогодні ми розглянемо бібліотеку, що дозволяє зробити простий список, який ми можемо сортувати і видаляти елементи свайпамі.

Подивитися приклад можна тут.

А вихідні ви зможете знайти тут.

Використовувати дану бібліотеку нескладно

var list = document.querySelector(`Ul # slippylist`) - 
newSlip(list) - 
 
list.addEventListener(`Slip: beforeswipe`,function(e){ 
if(shouldNotSwipe(e.target)){ 
 e.preventDefault() - 
} 
}) - 
 
list.addEventListener(`Slip: swipe`,function(e){ 
if(thatWasSwipeToRemove){ 
 e.target.parentNode.removeChild(e.target) - 
}else{ 
 e.preventDefault() - 
} 
}) - 
 
list.addEventListener(`Slip: beforereorder`,function(e){ 
if(shouldNotReorder(e.target)){ 
 e.preventDefault() - 
} 
}) - 
 
list.addEventListener(`Slip: beforewait`,function(e){ 
if(isScrollingKnob(e.target)){ 
 e.preventDefault() - 
} 
}) - 
 
list.addEventListener(`Slip: reorder`,function(e){ 
if(reorderedOK){ 
 e.target.parentNode.insertBefore(e.target, e.detail.insertBefore) - 
}else{ 
 e.preventDefault() - 
} 
}) -

Отже, що ж це за методи?

slip: swipe

Коли користувач зробить свайп, елемент повернеться на текующую позицію, якщо встановлено event.preventDefault (). В іншому випадку елемент буде видалено.

slip: beforeswipe

Спрацьовує ще до першого свайпа. якщо встановлений event.preventDefault (), тоді елемент не буде рухатися взагалі. Батьківський елемент матиме клас slip-swiping-container для тривалості анімації.