JQuery Draggable Droppable e Sortable allo stesso tempo per DOM Manipulation

Question

Sto provando a impostare somme tipo di trascinare e rilasciare l'editor wysiwyg usando l'interfaccia utente di JQuery.

Ho impostato con successo gli elementi ma hanno uno strano comportamento.

È quasi impossibile ordinare gli elementi a causa del costante sfarfallio.

impostare il mio draggables come questo:

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

Se io non impostarlo come trascinabile il ordinabili metterà il segnaposto su se stessa! perché?

A volte quando un elemento viene rilasciato in un altro diventa UN elemento trascinabile e sembra essere incollato insieme. però che sembra fissata con l'override aggiornamento ordinabile:

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)); 
    } 

e il metodo setupDandD:

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(); 
    }; 

Credo che ho bisogno di pick-up qualche evento da qualche parte sulla ordinabile ma sono abbastanza perso ora ...

Answer 1

Bene bene! L'ho trovato!

In realtà il mio più grande errore era mescolare droppable e ordinabile allo stesso tempo. Ho appena dovuto usare sibili e trascinabili con il set di opzioni connectToSortable.

L'altro comportamento strano che ho avuto è stato il tentativo di inserire in se stesso. Ciò è dovuto al fatto che "connectWith" ordinabile è stato impostato su un selettore che ha restituito self e quindi ha posizionato immediatamente il segnaposto su se stesso durante il trascinamento. Abbastanza logico in realtà!

Per superare questo ho circondato ogni bambino ordinabile con un div. Rende il div un elemento ordinabile e impedisce di attivare gli eventi su se stessi.

Una cosa da tenere in considerazione quando si utilizza draggable + sortable è che l'ordinabile clonerà sempre l'oggetto com'era all'inizio del trascinamento. Ciò significa che, anche se si utilizza un helper personalizzato sul trascinabile, verrà comunque inserito l'elemento originale. Per questo ho dovuto sostituire l'elemento in caso di "stop" del ordinabili per quello che volevo se ne è venuto dalla mia cassetta degli attrezzi:

$('.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(); 

e qui è il violino di lavoro: http://jsfiddle.net/jmorvan/ag659/

mi rendo conto probabilmente c'è un modo più pulito di fare questa ultima correzione ignorando qualche evento non documentato in ordinabile/trascinabile, ma questo ha fatto il trucco per me!