Как реализовать JavaScript-интерфейс перемещения “карточек” между “лотками”?

Question

[Леонид]

Нужно сделать такой интерфейс на JavaScript:


суть проста: есть лотки, внутри которых карточки с Фамилиями, пользователь хватает любую карточку и перетаскивает её в любой лоток (например, хватает карточку Иванов и перетаскивает её в лоток 2), после нажимает на кнопку Сохранить и я в PHP получаю массив лотков с вложенными массивами карточек внутри.

Может кто-нибудь подскажет готовую библиотеку JavaScript или еще лучше плагин JQuery?

В стандартном Jquery UI есть Droppable (jqueryui.com/droppable), но допиливать много придется, а хотелось бы что-то более близкое к задаче и полуготовое.

Спасибо!

Answer 1

[Александр N++]

jquery sortable

$( ".block-card" ).sortable({
      items: ".item"   // див который перетаскиваем item
      connectWith: ".connectedSortable"  // класс контейнер лоток
    }).disableSelection();

jsfiddle.net/2rYqu

Comments

[Александр Вульф]

jQueryUI - дрянь, честно.

[Леонид]

не знал про connectWith, спасибо. Теперь думаю как мне потом сохранить в PHP это положение/нахождение карточек в лотках. После каждого перемещения отправлять AJAX-запросы не комильфо в моём случае, карточек и лотков будет много, и не хотелось бы хранить лишнего в момент работы по перемещению, сохранять состояние карточек в лотках хочется уже после нажатия кнопки Сохранить, т.е. получать как-то через POST то что нужно и уже с этим работать.

[Александр N++]

Создайте скрытый инпут с классом currentposition со значениями при перетаскивание в иекущей карточке у скрытого поля будут менятся значения

stop: function ( event, ui) {
                    var inputs = $(ui.item).closest('.connectedSortable').find('.currentposition');
                    var nbElems = inputs.length;
                    $(inputs).each(function(idx) {
                        $(this).val(nbElems - idx);
                    });
                }

[Александр N++]

jsfiddle.net/2rYqu/6

Answer 2

[Александр Вульф]

Используйте эту либу: rubaxa.github.io/Sortable