jQuery UI sortable：クローンを移動しますが元のままにします

Question

今私は要素の列を持っています。ドラッグする場所、クローンしますが、ドロップすると元のものも削除されます。

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

は、どのように私はどこにその（列に再度追加なし）で、オリジナルを維持し、目的の場所へのクローンの動きを持つことができますか？

Answer 1

ストップイベントハンドラ内で$(this).sortable('cancel')を使用すると、アイテムを元のリスト/位置に戻すことができます。 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：

のように次のような何かを、アイテムがドロップされた場所に第二のリストに要素を追加するには：

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

fiddle用を参照してください。完全なデモ

Answer 2

これは他のproach：

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