Всем привет! Сегодня рассмотрим библиотеку, позволяющую сделать простой список, который мы можем сортировать и удалять элементы свайпами.
Всем привет! Сегодня рассмотрим библиотеку, позволяющую сделать простой список, который мы можем сортировать и удалять элементы свайпами.
Посмотреть пример можно тут.
А исходники вы сможете найти здесь.
Использовать данную библиотеку несложно
var list = document.querySelector('ul#slippylist');
new Slip(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 для продолжительности анимации.
slip:reorder
Сработает, когда элемент будет помещен на новое местоположение.
slip:beforeorder
Срабатывает, когда происходят движения сортировки.
slip:beforewait
Если у вас стоит event.preventDefault(), то изменение порядка будет происходить сразу, блокируя способность пролистывать страницу.
slip:tap
Сработает, когда элемент был тапнут, но не свайпнут.
slip:cancelswipe
Срабатывает, когда пользователь отпускает элемент, и он возвращается в исходную позицию.
Итак, на этом все. Спасибо за внимание и удачи!
