jQuery droppable zone in droppable zone

Question

Ho una lista non ordinabile trascinabile denominata <ul class="droppable">. All'interno della lista non ordinata ho generato dinamicamente gli elementi della lista denominati <li class="placeholder"></li>, che sono anche trascinabili.

Quando si rilascia un elemento trascinabile tra un segnaposto, tutto funziona correttamente. Ma quando si rilascia un elemento trascinabile sullo <li class="placeholder"></li> stesso, l'elemento trascinabile viene aggiunto al segnaposto e all'elenco non ordinato.

Quindi ottengo un doppio clone di esso.

Here's a jsfiddle per avere un esempio visivo. Sono consapevole del fatto che è logico ottenere un doppio clone sulla mia pagina, ma non so come disattivarlo ...

Qualsiasi aiuto è molto apprezzato!

UPDATE: Se si trascina un oggetto trascinabile verticalmente su un elemento trascinabile, vengono aggiunti automaticamente? Come è possibile?

Answer 1

Un approccio che potresti tentare di risolvere sarebbe spostare tutti i tuoi comportamenti sul tuo sortable e utilizzare droppable solo per fare un passaggio per determinare il comportamento che ti serve. In questo modo, puoi gestire tutto in un unico posto, il che dovrebbe risolvere alcuni degli effetti indesiderati di avere sia sortable e droppable sugli stessi elementi. In questo modo:

Nel tuo droppable si imposta l'interruttore su over e out e si impostano gli oggetti necessari.

$("li.placeholder").droppable({ 

       accept: "li.to-drag", 
       hoverClass: "correct", 
       activeClass: "active", 
       revert: false, 
       tolerance: "pointer", 
       over: function (e, ui) { 
        curDrag = ui.draggable; 
        curTarget = e.target; 
             curThis = $(this); 
        overSortable = true; 
       }, 
       out: function (e, ui) { 
        overSortable = false; 
       }, 

       drop: function (event, ui) { 

       } 

      }); 

Poi, in caso di beforeStopsortable, si controlla se la variabile overSortable sia vero o no e impostare i comportamenti lì. Tutto ciò che si riferisce a ui.draggable, this ed event.target dovrà essere sostituito dagli oggetti che hai impostato in droppable. Un modo migliore per un evento sarebbe quello di fare in modo che una funzione gestisca tutti questi comportamenti e li trasmetta come argomenti.

beforeStop: function (e, ui) { 
       if (overSortable) { 
        curDrag.addClass('placeholder'); 
        var dragging = curDrag.find("img").remove(); 

        curThis.append(dragging).addClass("dropped"); 
        curThis.droppable('disable'); 

        var day = curDrag.attr('data-id'); 
        var index = $(curTarget).index(); 

        //... 

       } else { 
        ui.item.addClass('placeholder') 
       } 

ci sono adjusments ancora da fare, non è del tutto chiaro che cosa esattamente dovrebbe accadere e quando, ma questo può rendere più facile lavorare invece di cercare di gestire più eventi di essere licenziato quando si rilascia un elemento, è solo gestirne uno

http://jsfiddle.net/ts290vth/4/

Answer 2

riuscito a farlo funzionare per voi:

function dropping() { 

     $("li.placeholder").droppable({ 

      accept: "li.to-drag", 
      hoverClass: "correct", 
      activeClass: "active", 
      revert: false, 
      tolerance: "pointer", 

      drop: function (event, ui) { 

       var dragging = ui.draggable.find("img"); 

       $(this).append(dragging).addClass("dropped"); 
       $(this).droppable('disable'); 

       var day = $(ui.draggable).attr('data-id'); 
       var index = $(event.target).index(); 

       $(this).attr("data-id", day); 
       $(this).attr("date-order", index); 
       $(this).addClass("drop-"+ index); 
       $(this).attr("data-content", ""); 

AVVISO: il var dragging = ui.draggable.find("img"); questa linea si stava facendo copie duplicate a trascinare e rilasciare in modo che solo dovuto togliere il clone();.

ha creato cloni degli oggetti trascinati a dest.

Ora notare questo:

$("#dropzone").droppable({ 

     accept: "li.to-drag", 
     revert: false, 
     tolerance: "pointer", 

     drop: function (event, ui) { 

      $(this).append(dragging); 
      //$("li.to-drag").addClass("placeholder"); 
      $(this).droppable('disable'); 

     } 

    }); 

} 

Qualcosa con la classe segnaposto si sta causando problemi.

Spero che questo aiuti.