जब मैं ड्रैग करने योग्य क्लोन बना देता हूं और इसे ड्रॉपप्रेबल में छोड़ देता हूं तो मैं इसे फिर से खींच नहीं सकता

Question

जब मैं ड्रैग करने योग्य क्लोन बना देता हूं और इसे ड्रॉपप्रेबल में छोड़ देता हूं तो मैं इसे फिर से खींच नहीं सकता। मैं उसको कैसे करू? दूसरी बात यह है कि मैं ड्रॉपपेल में क्लोन जोड़ने के लिए केवल .append को कैसे समझ सकता हूं। लेकिन फिर यह किसी मौजूदा तत्व के बाद शीर्ष-बाएं कोने में जाता है, न कि ड्रॉप स्थिति।

$(document).ready(function() { 
    $("#container").droppable({ 
     drop: function(event, ui) { 
      $(this).append($(ui.draggable).clone()); 
     } 
    }); 
    $(".product").draggable({ 
     helper: 'clone' 
    }); 
}); 
</script> 

<div id="container"> 
</div> 
<div id="products"> 
    <img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" /> 
    <img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" /> 
    <img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" /> 
</div> 

Answer 1

एक तरह से यह करने के लिए है:

$(document).ready(function() { 
    $("#container").droppable({ 
     accept: '.product', 
     drop: function(event, ui) { 
      $(this).append($("ui.draggable").clone()); 
      $("#container .product").addClass("item"); 
      $(".item").removeClass("ui-draggable product"); 
      $(".item").draggable({ 
       containment: 'parent', 
       grid: [150,150] 
      }); 
     } 
    }); 
    $(".product").draggable({ 
     helper: 'clone' 
    }); 
}); 

लेकिन मुझे यकीन है कि अगर यह अच्छे और साफ कोडन है नहीं कर रहा हूँ।

Answer 2

मुझे यह प्रश्न Google के माध्यम से मिला। गिरा दिया आइटम का स्थान बदलने की कोशिश कर रहे लोगों के लिए

$(this).append($(ui.helper).clone()); 

Answer 3

: मैं नहीं, या तो कंटेनर से झपटते से पदों रख सकता है जब तक मैं बदल 'ui.helper' को 'ui.draggable' जब जोड़कर। यहाँ एक नज़र डालें।

Jquery drag /drop and clone।

मैं वास्तव में कोड

तरह

$(item).css('position', 'absolute'); 
$(item).css('top', ui.position.top - $(this).position().top); 
$(item).css('left', ui.position.left - $(this).position().left); 

यह करने के लिए लग रहा है कि उपयोग करने के लिए किया था।

Answer 4

यहां मेरा समाधान है, यह क्लोन को खींचने और छोड़ने की अनुमति देता है, और उसके बाद इसे किसी अन्य ड्रैग और ड्रॉप के बाद बदल देता है। इसमें एक कॉलबैक फ़ंक्शन पैरामीटर भी है जो गिराए गए div ऑब्जेक्ट को वापस भेजता है ताकि आप एक बार हटाए गए jquery चयनित div के साथ कुछ कर सकें।

refreshDragDrop = function(dragClassName,dropDivId, callback) { 
    $("." + dragClassName).draggable({ 
    connectToSortable: "#" + dropDivId, 
    helper: "clone", 
    revert: "invalid" 
    }); 
    $("#" + dropDivId).droppable({ 
    accept: '.' + dragClassName, 
    drop: function (event, ui) { 
     var $this = $(this), 
     maxItemsCount = 1; 
     if ($this.children('div').length == maxItemsCount){ 
     //too many item,just replace 
     $(this).html($(ui.draggable).clone()); 
     //ui.sender.draggable('cancel'); 
     } else { 
     $(this).append($(ui.draggable).clone()); 
     } 
     if (typeof callback == "function") callback($this.children('div')); 
    } 
    }); 
}