- PVSM.RU - https://www.pvsm.ru -
Я понимаю, возможно, есть ощущение, что статья опоздала года этак на 2, сейчас модно писать про es6, react, redux или другие модные в мире фронтенда штуки.
Однако, я думаю, у многих до сих пор есть проекты, которые используют jQuery + jQuery UI. И вот в одном из проектов, используя именно jQuery UI для сортировки элементов списка, мне потребовалась анимация сортировки, которой в jQuery UI «из коробки» нет. Гугление и поиск по stackoverflow привели только к странным решениям через стандартные jquery-ui колбэки, а так как мест, где сортировка использовалась было несколько, такие решения мне не подходили.
К тому же в проекте использовалась библиотека jQuery UI Touch Punch, которая позволяет элегантным образом заставить jQuery UI работать на touch-устройствах, я подумал, почему бы не сделать так же.
Начав разбираться в том, как работает sortable, стало ясно, что при сортировке элементы, перетаскиваемый и на место которого его хотим поставить, просто меняются местами в DOM-дереве. При таком раскладе, из возможных реализаций моей задачи в голову пришла только одна идея.
После того, как элемент был перемещен на новое место в DOM-дереве, в зависимости от направления сортировки сместим его в обратную сторону на его высоту (или ширину, в зависимости от оси направления сортировки) и сразу же запустим анимацию. Возможно, на схеме будет чуть понятнее:
Рассмотрим каждый шаг:
Вуаля, не затрагивая базовую логику виджета sortable мы добавили в него анимацию. Я реализовал это в виде расширения виджета sortable, поэтому чтобы добавить анимацию в уже существующий проект, который использует sortable, нужно просто подключить скрипт и добавить свойство animate в параметры sortable:
<script src="jquery.ui.sortable-animation.js"></script>
<script>
$('#sortable').sortable({
// ...
// уже существующие параметры
axis: 'y', // обязательно (либо 'x', либо 'y'), иначе будет работать без анимации
animation: 200, // время анимации (0 - не применять анимацию)
});
</script>
Исходный код на GitHub [1]
Demo [2]
Плюсы:
Ну и, конечно, минусы:
На данный момент библиотека решает свои задачи, но неплохо было бы, как минимум, избавиться от обязательности указания свойства axis. Если у вас есть идеи и время — пул-реквесты приветствуются.
Автор: egych
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/107188
Ссылки в тексте:
[1] Исходный код на GitHub: https://github.com/egorshar/jquery-ui-sortable-animation
[2] Demo: https://egorshar.github.io/jquery-ui-sortable-animation/ru.html
[3] Источник: http://habrahabr.ru/post/273923/
Нажмите здесь для печати.