jQuery UI ordinabile: spostare clone ma mantenere originale

Question

In questo momento ho una colonna di elementi e l'ho al punto in cui dove trascino, clona ma quando cado, rimuove anche l'originale.

$(".column").sortable({ 
     helper: 'clone', 
     connectWith: ".column", 
     connectWith: ".grid", 
     start: function(e, ui){ 
      ui.placeholder.height(ui.item.height()); 
      $(".column").find('.portlet:hidden').show() 
      console.log('started') 
     }, 
     stop: function(event, ui) { 
      $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body'); 
     } 
    }); 

Come posso mantenere l'originale dove la sua struttura (senza ri-aggiungendo alla colonna) e hanno la mossa clone nella posizione desiderata?

Answer 1

Utilizzare $(this).sortable('cancel') all'interno del gestore eventi di arresto per ripristinare l'elemento nella sua lista/posizione originale. http://api.jqueryui.com/sortable/#method-cancel

$(".column").sortable({ 
     helper: 'clone', 
     connectWith: ".column", 
     connectWith: ".grid", 
     start: function(e, ui){ 
      ui.placeholder.height(ui.item.height()); 
      $(".column").find('.portlet:hidden').show() 
      console.log('started') 
     }, 
     stop: function(event, ui) { 
      $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body'); 
      $(this).sortable('cancel'); 
     } 
    }); 

UPDATE:

per aggiungere l'elemento al secondo elenco nella posizione della voce era caduta, fare qualcosa come il seguente:

stop: function(event, ui) { 
      var toListID = ui.item.parent().attr('id'); 
      var idx = $('#' + toListID).children().index($(ui.item[0])); 
      if(idx== -1)return; 
      var elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone'); 
      $('#' + toListID).children(':eq('+idx+')').after(elm); 
      $(this).sortable('cancel'); 
     } 

Vedi fiddle per demo completa

Answer 2

Questo è un altro proach:

sort: function(e, ui) { 
    $(ui.placeholder).html($(ui.item).html()); 
    $(ui.placeholder).addClass($(ui.item).attr('class')); 
},