jquery ui trascina + ordinabile

Question

Sto provando a fare un drag and drop anche ordinabile. Posso trascinare dal div 1 al 2 e dal div 2 al div 1, ma poiché uso il clone non riesco a ottenere un lavoro ordinabile.

Qualche idea?

$(document).ready(function() { 

    $("#qselected").sortable(); 
    $("#qselected").disableSelection(); 

    $(".qitem").draggable({ 
     containment : "#container", 
     helper : 'clone', 
     revert : 'invalid' 
    }); 

    $("#qselected, #qlist").droppable({ 
     hoverClass : 'ui-state-highlight', 
     drop : function(ev, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 

      $(".qitem").draggable({ 
       containment : "#container", 
       helper : 'clone', 
       revert : 'invalid' 
      }); 
     } 
    }); 
}); 

Demo online: http://jsfiddle.net/6xXPq/4/

Answer 1

Per far funzionare tutto questo non si può avere elementi nella casella sceso trascinabile di nuovo, perché non si sa se si stesse cercando di risolvere, o trascinare. Example JSFiddle

$(document).ready(function() { 
    $("#qselected").sortable(); 
    $("#qselected").disableSelection(); 

    $(".qitem").draggable({ 
     containment : "#container", 
     helper : 'clone', 
     revert : 'invalid' 
    }); 

    $("#qselected, #qlist").droppable({ 
     hoverClass : 'ui-state-highlight', 
     accept: ":not(.ui-sortable-helper)", 
     drop : function(ev, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 
     } 
    }); 
}); 

Per farlo funzionare correttamente, non è possibile consentire al gestore di goccia di accettare gli elementi che vengono ordinati, per fare questo si aggiunge il filtro accept a:

Ecco il codice lavorando il gestore droppable:

accept: ":not(.ui-sortable-helper)", 

Ciò significa che ora è possibile trascinare gli elementi dalla casella basso verso l'alto e poi ordinare il bauletto. Tuttavia non puoi più trascinare gli oggetti fuori dal box superiore.

Si dovrà mettere a punto un nuovo metodo di rimuoverli (si può probabilmente essere fatto utilizzando un flag per rimuovere lo switch tra la Draggable/funzionalità ordinabili del bauletto)

Answer 2

Ho la stessa domanda e ho trovato questo article and demo

Non c'è bisogno di utilizzare trascinabili e droppable, basta usare il seguente codice (check out demo):

$('#example-1-4 .sortable-list').sortable({ 
     connectWith: '#example-1-4 .sortable-list', 
     containment: '#containment' 
    }); 

Il punto chiave è l'opzione connectWith di sortable() Spero che questo aiuti.