JQuery Draggable Droppable i Sortable w tym samym czasie do DOM manipulacji

Question

Próbuję skonfigurować somme rodzaju przeciągnij i upuść edytora wysiwyg przy użyciu JQuery UI.

Udało mi się skonfigurować elementy, ale mają dziwne zachowanie.

Jest prawie niemożliwe sortowanie elementów ze względu na ciągłe migotanie.

konfiguracji i moje draggables takie jak ten:

el.draggable({ 
    containement:'.main-form-container', 
    revert: "invalid", 
    connectToSortable: '.sortable' 
}).disableSelection(); 

Jeśli dont ustawić go jako przeciągany sortable umieści zastępczy na sobie! czemu?

Czasami, gdy element zostaje wrzucony do innego elementu staje się JEDNYM, przeciągalnym elementem i wydaje się być sklejony. choć wydaje się, że ustalona z nadrzędnymi sortable aktualizacji:

update: function (event, ui) { 
     $(ui.item).css({ 
      position: 'relative', 
      top:0, 
      left:0, 
      width: 'auto' 
     }); 

     // init droppable draggable and sortable on this item 
     setupDandD($(ui.item)); 
    } 

i setupDandD metody:

setupDandD($('.form-container')); 

    function setupDandD(el) { 
     el.draggable({ 
      containement:'.main-form-container', 
      revert: "invalid", 
      connectToSortable: '.sortable' 
     }).disableSelection(); 

     el.droppable({ 
      accept: '[data-section="toolbox"]', 
      greedy: true, 
      hoverClass: 'droppable-hovered', 
      drop: handleDrop 
     }).disableSelection(); 

     el.filter('.sortable').sortable({ 
      tolerance:'pointer', 
      containement:'.main-form-container', 
      connectWith: ".sortable:not(#" + $(this).id + ")", 
      revert: 'invalid', 
      helper: function() { 
       return $(this); 
      }, 
      update: function (event, ui) { 
       console.log('here'); 
       $(ui.item).css({ 
        position: 'relative', 
        top:0, 
        left:0, 
        width: 'auto' 
       }); 
       setupDandD($(ui.item)); 
      } 
     }).disableSelection(); 
    }; 

Chyba trzeba pickup jakieś zdarzenie gdzieś na sortable ale ja zupełnie stracił teraz ...

Answer 1

Dobrze! Znalazłem to!

Właściwie moim największym błędem było jednoczesne miksowanie zrzutów i sortowanie. Po prostu musiałem użyć sortableables i draggables z zestawem opcji connectToSortable.

Innym dziwnym zachowaniem, jakie miałem, było sortowalne, które próbowałem włożyć w siebie. Dzieje się tak dlatego, że sortowalne "connectWith" zostało ustawione na selektor, który zwrócił self, a następnie natychmiast umieścił symbol zastępczy podczas przeciągania. Całkiem logiczne!

Aby przezwyciężyć to, po prostu otoczyłem każde dziecko dziełem div. To sprawia, że ​​div jest pozycją do sortowania i zapobiega wyzwalaniu zdarzeń na sobie.

Jedną z rzeczy, które należy wziąć pod uwagę podczas używania przeciągania i sortowania, jest to, że sortowalne zawsze klonuje obiekt, tak jak było, gdy rozpoczęto przeciąganie. Oznacza to, że nawet jeśli użyjesz niestandardowego pomocnika w przeciągu, to nadal wstawi oryginalny element. Do tego musiałem wymienić element na „stop” wydarzenie z sortable przez jednego Chciałem gdyby przyszło z mojego przybornika:

$('.main-form-container').sortable({ 
    placeholder: "sortable-placeholder", 
    opacity: .35, 
    connectWith: ".sortable", 
    stop: function (e, t) { 

     if (t.item.attr('data-section') == "toolbox") { 
      $(t.item).replaceWith(createContainer()); 
     } 

     $(".sortable").sortable({ 
      opacity: .35, 
      placeholder: "sortable-placeholder", 
      connectWith: ".sortable" 
     }).disableSelection(); 
    } 
}).disableSelection(); 

i oto skrzypce robocze: http://jsfiddle.net/jmorvan/ag659/

Zdaję sobie sprawę, Prawdopodobnie jest to czystszy sposób na zrobienie tego ostatniego fixu przez nadpisanie niektórych nieudokumentowanych zdarzeń w sortable/draggable, ale to mi się udało!