Пользовательский интерфейс jQuery с возможностью удаления/перетаскивания

Вот мой JS Fiddle.

В JS Fiddle есть 3 Droppables внутри div под названием «droppables» и 3 Draggables внутри div под названием «draggables». Вы можете перетащить любой из перетаскиваемых элементов на любой из выпадающих элементов, и он обновит соответствующий div с данными.

    $(this).text('');
    $('#div1_value').text(ui.draggable.data('object'));
    $(ui.draggable).appendTo(this);

Вам также разрешено «перезаписывать», перетаскивая перетаскиваемый элемент на перетаскиваемый уже там. Это добавит старое перетаскиваемое обратно в список перетаскиваемых.

if(counter != 1)
        {
            $(this).find('.ui-draggable').appendTo($('#draggables'));
            counter = 1;
        }

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


html jquery jquery-ui jquery-ui-draggable jquery-ui-droppable
person TaylorM    schedule 11.01.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, вторая попытка.

Вы должны использовать функции start и stop перетаскиваемого объекта: http://api.jqueryui.com/draggable/#event-start

Когда происходит начальное событие, ui.helper — это новый перетаскиваемый временный объект, а ui.helper.prevObject — это предыдущий объект, все еще находящийся на своем месте.

Когда происходит событие остановки, ui.helper по-прежнему является перетаскиваемым временным объектом, а ui.helper.prevObject — новым объектом, который вот-вот приземлится (я знаю, это немного сбивает с толку, так как он называется prevObject, но похоже, что так оно и работает).

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

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

В раскрывающемся списке следует использовать событие out: http://api.jqueryui.com/droppable/#event-out для перехвата, когда один из ваших перетаскиваемых элементов покидает выпадающий.

Через минуту у меня будет для вас код.

person A. Rama    schedule 11.01.2015
comment
Мой следующий вопрос будет заключаться в том, как мне получить доступ к «#DIV1_Value» в рамках события start and drop? - person TaylorM; 12.01.2015
comment
Я возился с событием запуска и падения в течение последнего дня, и я абсолютно ничего не добился. - person TaylorM; 13.01.2015