Сортировка при помощи HTML5 Drag’n’Drop API

Sortable.js — минималистичная библиотека для современных браузеров и touch-устройств, не требующая jQuery.

Как вы уже догадались из названия, библиотека предназначена для сортировки элементов при помощи drag’n’drop. Стандартным решением в таких случаях является jQuery UI/Sortable, а это ни много, ни мало 64 кб + 10 кб. Итого 75 кб gzipped в проекте, где jQuery не используется совсем. Относительно недавно на Хабре уже была статья о том, как реализовать похожий функционал, но опять же на jQuery, да и touch-устройства в предлагаемом решении не поддерживаются.

Помимо проблем с весом, все найденные мной, библиотеки не умели работать с динамически изменяемым списком. В момент инициализации плагина они определяли позиции всех элементов, и, чтобы обновить их, нужно было переинициализировать плагин, либо вызвать метод $(‘...’).sortable(‘refresh’), что весьма неудобно.

Так как в моей задаче не требовалась поддержка старых браузеров, я решил попробовать сделать нужный мне функционал на чистом JS, с использование HTML5 Drag’n’Drop.

После прочтения статей на эту тему, оказалось, что сейчас создать подобный функционал очень просто, можно даже уложиться в 25 строк (если убрать комментарии и отбивку):

http://jsfiddle.net/RubaXa/zLq5J/

function sortable(rootEl, onUpdate){    var dragEl;        // Делаем всех детей перетаскиваемыми    [].slice.call(rootEl.children).forEach(function (itemEl){        itemEl.draggable = true;    });        // Функция отвечающая за сортировку    function _onDragOver(evt){        evt.preventDefault();        evt.dataTransfer.dropEffect = 'move';               var target = evt.target;        if( target && target !== dragEl && target.nodeName == 'LI' ){            // Сортируем            rootEl.insertBefore(dragEl, target.nextSibling || target);        }    }        // Завершение сортировки    function _onDragEnd(evt){        evt.preventDefault();               dragEl.classList.remove('ghost');        rootEl.removeEventListener('dragover', _onDragOver, false);        rootEl.removeEventListener('dragend', _onDragEnd, false);          // Сообщаем об окончании сортировки        onUpdate(dragEl);    }        // Начало сортировки    rootEl.addEventListener('dragstart', function (evt){        dragEl = evt.target; // Запоминаем элемент который будет перемещать                // Ограничиваем тип перетаскивания        evt.dataTransfer.effectAllowed = 'move';        evt.dataTransfer.setData('Text', dragEl.textContent);          // Подписываемся на события при dnd        rootEl.addEventListener('dragover', _onDragOver, false);        rootEl.addEventListener('dragend', _onDragEnd, false);          setTimeout(function (){            // Если выполнить данное действие без setTimeout, то            // перетаскиваемый объект, будет иметь этот класс.            dragEl.classList.add('ghost');        }, 0)    }, false); }                         // Используем                     sortable( document.getElementById('list'), function (item){    console.log(item); }); 

Как видно из кода, вся сортировка состоит из простого перемещения перетаскиваемого элемента при помощи rootEl.insertBefore(dragEl, target.nextSibling || target), где target — это элемент, на который навелись. Если вы уже протестировали пример, то наверняка заметили, что нельзя перетащить элемент на первую позицию. Еще один нюанс метода — onUpdate вызывается каждый раз, даже если элемент не был перемещен.

Для того, чтобы избавиться от первой проблемы, достаточно добавить проверку при сортировке. Вставлять элемент после target.nextSibling нужно только в том случае, если это не первый элемент списка:

http://jsfiddle.net/RubaXa/zLq5J/3/

if( target && target !== dragEl && target.nodeName == 'LI' ){      // Сортируем      rootEl.insertBefore(dragEl, rootEl.children[0] !== target && target.nextSibling || target); } 

Помимо этого, простое сохранение ссылки на следующий элемент (nextEl = dragEl.nextSibling) на момент dragstart, позволяет избавиться от второй проблемы (http://jsfiddle.net/RubaXa/zLq5J/4/ 29 и 38 строка).

На первый взгляд, все выглядит хорошо, получился компактный и понятный код, который поддерживают большинство браузеров, а если добавить поддержку attachEvent и убрать dragEl.classList.add/remove, то код будет работать даже в IE5.5 :]

Но, если мы немного изменим пример, просто увеличив высоту элементов списка, то получим третью проблему. Сортировка нормально работает сверху вниз, а вот наоборот — уже плохо. Поэтому логику выбора вставки элемента, «перед» или «после», нужно переписать, чтобы она учитывала, в какой половине находится курсор мыши, «верхней» или «нижней». Для этого на onDragOver получаем координаты элемента относительно экрана и проверяем, в какой половине находится курсор:

http://jsfiddle.net/RubaXa/zLq5J/6/

var rect = target.getBoundingClientRect(); var next = (evt.clientY - rect.top)/(rect.bottom - rect.top) > .5; rootEl.insertBefore(dragEl, next && target.nextSibling || target); 

Помимо этого, ещё пришлось доработать работу с inline-элементами и float-блоками.

Touch support

Увы, но drag’n’drop не работает на touch-устройствах, поэтому как-то надо было сделать эмуляцию на основе touch-событий. Я долго ломал голову, читал документацию, но ответа так и не нашёл. В итоге, ещё немного покопавшись, я вспомнил о замечательном методе document.elementFromPoint, который позволяет получить ссылку на элемент по координатам.

В итоге на touchstart я клонирую элемент, который будет выполнять роль «призрака» под пальцем и на touchmove перемещаю его при помощи translate3d:

var       touch = evt.touches[0]     , dx = touch.clientX - tapEvt.clientX     , dy = touch.clientY - tapEvt.clientY ; 

Кроме этого, я запускаю setInterval, в котором каждые 100ms проверяю элемент, над котором в данный момент находится палец:

_emulateDragOver: function (){    if( touchEvt ){         // Скрываем “призрака” под пальцем         _css(ghostEl, 'display', 'none');          // Получаем элемент, который находится под пальцем         var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY);          // Проверяем полученный элемент и если он принадлежит rootEl,         // вызываем метод onDragOver:         this._onDragOver({               target:    target             , clientX:  touchEvt.clientX             , clientY:  touchEvt.clientY         });           // Обратно показываем “призрака”         _css(ghostEl, 'display', '');      }  }

Вот и всё, ничего сверхъестественного, как видите, нет. Оформляем код, пишем небольшую документацию и микро библиотечка готова.

Sortable

Библиотека получилось размером 2 кб gzipped и обладает следующими возможностями:

• Сортировка вертикальных и горизонтальных списков;
• Возможность задать элементы для сортировки (css-селектор);
• Объединение в группы;
• Возможность задать handle (элемент, за который можно перетаскивать);
• Класс, который добавляется к перемещаемому элементу;
• События onAdd, onUpdate, onRemove;
• Работа с динамически изменяемым списком.

Пример кода:

// Простой список, например ul > li var list = document.getElementById("my-ui-list"); new Sortable(list); // И всё.   // Группировка var foo = document.getElementById("foo"); new Sortable(foo, { group: "omega" });  var bar = document.getElementById("bar"); new Sortable(bar, { group: "omega" });   // handle + event var container = document.getElementById("multi"); new Sortable(container, {  handle: ".tile__title", // css-селектор, за который можно таскать  dragabble: ".tile", // css-селектор элементов, которые можно сортировать  onUpdate: function (evt/**Event*/){     var item = evt.detail; // ссылка на элемент, который переместили  } });

На данный момент, есть только базовый функционал, буду рад любым отзывам или pull request, спасибо за внимание.

                               Demo | Source

Также вы можете следить за нашими проектами через:

github.com/mailru — FileAPI, Tarantool, Fest и многое другое
github.com/rubaxa — мой github
@ibnRubaXa