dragula.js — небольшой и очень удобный drag and drop плагин. Автор этого плагина старался сделать его максимально простым и в тоже время хотел сохранить основной набор возможностей подобных плагинов и думаю у него это получилось. Хоть у данного плагина не так много настроек, но их вполне достаточно для создания хорошего drag and drop приложения!

Особенности плагина

  • Поддержка IE7+;
  • Очень прост в установке;
  • Плагин не зависит от других скриптов, jquery не нужен;
  • При перемещении элементов сортировка не сбрасывается;
  • Есть визуальная связь с перемещаемым элементом, т.е. видно откуда взят элемент и куда он добавится;
  • Поддержка Touch событий.

Использование

Плагин dragula предоставляет очень простой API для использования всех возможностей. Основной и стандартный вызов плагина выглядит следующим образом:

1
2
3
4
dragula([containers], {
     options : param
     ...
})

Где containers — это id тегов контейнеров куда будут переноситься элементы, и options — это не обязательные параметры которые рассмотрим ниже.

По умолчанию элементы можно переносить в любой из установленных контейнеров, если элемент будет перенесен за пределы контейнеров то он установится в ближайшем их них, если нужно удалить элемент перетаскивая его за пределы установленных контейнеров, то для этого есть опция removeOnSpill.

Маленький пример ниже со стандартными параметрами позволяет перетаскивать элементы из левой в правую колонку и наоборот.

1
dragula([left, right]); // left и right это id тегов контейнеров

Опции

ПараметрПо умолчаниюОписание параметра
movesfunctionДанная опция переопределяет события перемещения элемента, т.е. по умолчанию элемент перемещается если его зацепить в любом месте, но можно например сделать в блоке с элементом маленькую кнопку и переопределить событие перемещения на эту кнопку, в демо есть пример такой реализации.
acceptsfunctionопция accepts позволяет определить функцию разрешения или запрета перемещения элемента или элементов. Например можно запретить перемещать элементы в другой контейнер и после перемещения они всегда будут возвращаться в родной контейнер.
copyfalseЕсли эта опция активирована(true) то элементы будут не перенесены как обычно а скопированы.
revertOnSpillfalseОб этой опции вскользь упоминали в начале статьи, суть ее в том что по умолчанию если перенести элемент за пределы какого-либо контейнера, то элемент установится в самый ближайший. Если данная опция активирована(true), то при перемещении за контейнер, элемент вернется в свой родной контейнер.
removeOnSpillfalseЕсли опция активирована(true), то при перемещении за контейнер, элемент удалится.
direction‘vertical’Конечно положение элемента при перемещении, адекватнее всего работает ‘vertical’ чем ‘horizontal’.

Опции

У drag and drop плагина dragula есть несколько очень удобных методов к которым нужно обращаться через возвращаемый объект, пример:

1
var drake = dragula([left, right]); //теперь работаем с объектом drake

ПараметрПо умолчаниюОписание параметра
drake.addContainer(container)container — контейнер или массив контейнеров состоящих из id тегов, метод создает контейнеры для перемещения элементов.
drake.removeContainer(container)Удаляет указанный контейнер или массив контейнеров.
drake.draggingfalseНемного не понятный метод. Если установить true то элементы перетаскиваться не будут.
drake.start(item)К сожалению данный метод не удалось проверить, не понял как он работает, но в описании автора сказано что «данный метод активирует режим перетаскивания без тени».
drake.end(item)???
drake.cancel(revert)???
drake.remove()Удаляет перетаскиваемый элемент из DOM
drake.on (Events)На демо страничке приведены примеры использования событий. Доступные события: drag, dragend, drop, cancel, remove, shadow
drake.destroy()Полностью удаляет контейнеры

Возможно вас это заинтересует
comments powered by HyperComments