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

Имам 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, когато пусна елемент вътре или изляза от държача на елемента.


jquery-ui jquery-ui-draggable jquery-ui-sortable droppable
person roflwaffle    schedule 30.03.2011    source източник

Отговори (1)


arrow_upward
8
arrow_downward

1:

Вашият drop() се извиква два пъти, защото connectToSortable също задейства drop().

Моето предложение би било да изтриете $(#doc-editor-content).droppable() изцяло и вместо това да добавите манипулатора receive(e, ui) към вашия сортируем.

2:

Вашата корекция работи. Въпреки това бих предложил много по-лесна алтернатива: оставете опцията за сортиране винаги активирана и добавете манипулатора на опцията: h2. (Изберете всеки етикет, който няма да съществува във вашите LI.) Това ще ви позволи да влезете в списъка, но ще деактивирате потребителското сортиране на място.

Пример:

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