Giao diện người dùng jQuery có thể sắp xếp: Di chuyển bản sao nhưng giữ nguyên

Question

Ngay bây giờ tôi có một cột các phần tử và tôi có nó đến điểm mà tôi kéo, nó nhái nhưng khi tôi thả, nó cũng loại bỏ bản gốc.

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

Làm cách nào để giữ nguyên bản gốc tại vị trí của nó (không gắn lại vào cột) và sao chép vào vị trí mong muốn?

Answer 1

Sử dụng $(this).sortable('cancel') bên trong trình xử lý sự kiện dừng để hoàn nguyên mục trở lại danh sách/vị trí ban đầu của nó. 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:

Để thêm các yếu tố để danh sách thứ hai ở vị trí mục này đã được thả, làm điều gì đó như sau:

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

Xem fiddle cho bản trình diễn đầy đủ

Answer 2

Đây là một proach:

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