Работа с jQuery UI Draggable, Droppable и Sortable - PullRequest
Новая
       27

Работа с jQuery UI Draggable, Droppable и Sortable

1 голос
/ 30 марта 2011

У меня есть ul перетаскиваемых предметов (#doc-editor-options ul li), область для отбрасывания этих предметов (#doc-editor-content) и ul в этой области для удержания этих предметов (#items-holder), которые можно сортировать.Это перетаскивание только в одну сторону, только элементы из списка можно перетаскивать в держатель. 

$("#doc-editor-options ul li").draggable({
    helper: 'clone',
    connectToSortable: '#item-holder',
    containment: $(".doc-editor")
});
$("#doc-editor-content").droppable({
    drop: function(e, ui){
        console.log('dropped');
    }
});
$("#item-holder").sortable({
    placeholder: 'placeholder-highlight',
    cursor: 'pointer',
});

У меня есть два вопроса:

  1. Прямо сейчаскогда я перетаскиваю элемент из списка и помещаю его в другой список, обратный вызов drop для .droppable() вызывается дважды.Я думаю, что это как-то связано с тем, что #item-holder можно сортировать.Я хочу, чтобы он запускался только тогда, когда я помещаю элемент в список и знаю только о event и ui этого элемента в обратном вызове.
  2. Мне также нужна функциональность, где по умолчанию items-holder не сортируется.Единственный раз, когда он становится сортируемым, это когда вы перетаскиваете элемент над ним.Поэтому я не могу отсортировать список по умолчанию, но если я перетаскиваю на него элемент, я могу выбрать, куда поместить этот элемент в списке (т. Е. Список теперь можно сортировать), и после его удаления список становится несортируемым.снова.

РЕДАКТИРОВАТЬ: Я понял # 2, мне нужно было привязать mousedown к перетаскиваемым элементам, что позволяет сортировать, а затем отключает его на mouseup.По-прежнему возникают проблемы с # 1, кажется, что некоторые из событий sortable запускают обратный вызов drop, когда я бросаю предмет или зависаю из держателя предмета.

1 Ответ

8 голосов
/ 31 марта 2011

1

Ваш метод drop () вызывается дважды, поскольку connectToSortable также вызывает функцию drop ().

Мое предложение заключается в том, чтобы полностью удалить $ ("# doc-editor-content"). Droppable () и вместо этого добавить обработчик receive (e, ui) в свой сортируемый.

2

Ваше исправление работает. Однако я бы предложил гораздо более простую альтернативу: оставьте сортировку всегда включенной и добавьте опцию «handle: h2». (Выберите любой тег, который не будет существовать в ваших LI.) Это позволит вам попасть в список, но отключит сортировку пользователей на месте.

Пример: 

$('#item-holder').sortable({
  placeholder: 'placeholder-highlight',
  cursor: 'pointer',
  handle: 'h2',
  receive: function(e, ui) {
    console.log('dropped');
  }
});
...