Двусторонняя сортировка / несортировка с помощью перетаскивания с помощью пользовательского интерфейса JQuery

Question

Двусторонняя сортировка / несортировка с помощью перетаскивания с помощью пользовательского интерфейса JQuery

0

У меня сложный сценарий перетаскивания, который я просто не могу понять. То, что я придумал, здесь: jsfiddle.net/aTjMG/2/

Слева у меня есть список имен. Справа, у меня есть группа команд. Список слева должен быть в алфавитном порядке и не сортироваться. Пользователь должен иметь возможность назначить человека команде, перетащив его из списка слева в команду. Лицо, назначенное командам, должно быть в состоянии сортироваться или перемещаться в другую команду или возвращаться в непризнанный пул.

Я могу перейти от непризнанного пула слева к любой команде. Я могу сортировать людей в командах. Из этого я не могу понять:

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

Я думаю, что большая проблема заключается в том, что я не могу понять, как поймать "падение" drag-n-drop, чтобы изменить назначенное ненаправленное лицо.

Будет оценен удар в правильном направлении. Пример, который будет делать это, будет по достоинству оценен!

Daniel Israel 30 сен. 2013, в 03:47

Источник

Теги:

javascript

jquery

jquery-ui

jquery-ui-sortable

jquery-ui-draggable

1 ответ

Ещё вопросы

Nucleon · Answer 1 · 2013-12-31T14-47-00.000Z

Если я правильно понимаю проблему, это действительно просто несколько отсортированных списков.

Обновите свою скрипку: http://jsfiddle.net/aTjMG/8/

Ключ просто объявляет их всех sortable и не возится с draggable вообще, который используется для более свободного перетаскивания.

$(function() {
  $( ".sortable" ).sortable({
    connectWith: ".sortable"
  }).disableSelection();
});

Пример этого также можно найти в документах пользовательского интерфейса: http://jqueryui.com/sortable/#connect-lists