jQuery UI सॉर्ट करने योग्य: क्लोन को ले जाएं लेकिन मूल रखें

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

अद्यतन:

की तरह स्थान आइटम छोड़ने गया था में दूसरी सूची तत्व संलग्न करने के लिए, कुछ निम्न करें:

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

यह अन्य है प्रचार:

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