Создайте новый элемент, используя jquery draggable / droppable и sortable

Question

Я пытаюсь создать скрипт сортировки карт.По сути, у вас есть список «карточек», которые вы должны затем отсортировать в любое количество «стопок» (списков).Я использую сортируемый плагин jQuery-UI и могу соединять списки для перемещения между ними.Проблема, с которой я сталкиваюсь, заключается в том, что я не могу найти способ заставить ее проверить, находится ли карта над пустым пространством или существующим списком, и если первый, когда я его уронил, создаст новый список.

Я пытался использовать перетаскиваемый / сбрасываемый объект, чтобы изначально карта не была ограничена сортируемыми данными, но я до сих пор не могу распознать, где находится карта.Я также думаю, что перетаскивание / отбрасывание не будет тем, что мне нужно, потому что тогда я не смогу переместить карту из сортируемого обратно в исходный список (перетаскиваемый).

В конечном счете, я буду использовать jjuery-способность ajax длясохранить результаты сортировки, но я не смогу сделать это, пока не смогу создать новые списки.

У кого-нибудь есть опыт в создании чего-то подобного?Любая помощь будет отличной!

Answer 1

Извините за поздний ответ, но работал над ним и не заметил другого ответа.

Мой вариант делает нечто довольно сравнимое с вариантом Горана.http://jsfiddle.net/fordlover49/rxVPq/

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

Хотя решение Горана, кажется, работает, я предостерегаю вас, что метод, который он использует для перемещения объектов, опасен и некорректен.Если у вас есть какие-либо связыватели событий для элементов, которые перемещаются в новый список, они будут потеряны, потому что он удалил старые элементы, к которым у вас были привязки событий, из DOM.

Answer 2

Хотя я не мог понять, как получить событие для создания нового стека, если его перетащить в пустую часть экрана, лучшее, что я мог сделать, это перетащить карты в область new.

См. Следующее jsFiddle .

Код позволяет перетаскивать карты из колоды либо в существующую стопку, либо в новую стопку, а также при необходимости возвращаться в колоду. Он также удаляет стеки (но не колоду), если оставить их пустыми после перетаскивания элемента в новое место.

Надеюсь, это поможет.