Пользовательский интерфейс jQuery: перемещение элементов из одного списка в другой - PullRequest
Новая
       2

Пользовательский интерфейс jQuery: перемещение элементов из одного списка в другой

5 голосов
/ 16 июня 2010

Хотя это должно быть относительно простым, я не могу понять, как перемещать (а не копировать) LI элементы между UL с.

Все, что я хочу - это перетащить любой элемент из списка foo в список bar (или наоборот) без дублирования элемента.

Хотя connectToSortable делает почти то, что я хочу (хотя я бы предпочел избегать sortable), он клонирует элемент - и удаление исходного элемента вручную, реагируя на событие stop, оказывается не это так просто (например, убедиться, что выпадение действительно произошло).

Простой пример "Привет, мир" очень мне помог бы.

1 Ответ

8 голосов
/ 16 июня 2010

Пример Hello World можно найти здесь: http://jqueryui.com/demos/sortable/#connect-lists. Вам вообще не нужно draggable, только sortable. 

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable'
    }).disableSelection();
});

Если вы хотите запретить сортировку элементов в одном списке, это может быть способом. Хотя это не самый красивый пользовательский интерфейс (пользователю дается ложная надежда), и пользователь также может свободно определять позицию сброса в иностранном списке. 

$(function() {
    var sender;
    var recvok = false;
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable',
        start: function() {
            sender = $(this);
            recvok = false;
        },
        over: function() {
            recvok = ($(this).not(sender).length != 0);
        },
        stop: function() {
            if (!recvok)
                $(this).sortable('cancel');
        }
    }).disableSelection();
});

Это действительно ужасная функция, работающая вокруг того, что я считаю незавершенностью в jQuery UI. Это сохраняет отправителя при старте и снимает флажок, позволяющий сбросить. Когда вводится другой получатель, он проверяет, не является ли он отправителем, и устанавливает флаг. На sortstop флаг проверен. Предупреждение: эта функция уродлива как для пользователя, так и для программиста, но работает.

...