jQuery ड्रैगगेबल + ड्रॉपपेबल - भौतिक रूप से ड्रैग किए गए आइटम को गिराए गए कंटेनर में

Question

मुझे ड्रैगगेबल के रूप में सेट किया गया तत्व लेने में सक्षम होना चाहिए और भौतिक रूप से उस तत्व को कंटेनर में ले जाना चाहिए क्योंकि वर्तमान कार्यक्षमता के रूप में इसे ओवरले करने के विपरीत।

उदाहरण के लिए

तो:

<div class="container"></div> 
<div class="image"> 
    <img class="thumb" src="images/Koala.jpg" alt="" /> 
</div> 

$(function() { 
    $(".image").draggable(); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      alert('dropped!'); 
     } 
    }); 
}); 

तो बाद चित्र खींच ली गई है और 'कंटेनर' मैं वास्तविक HTML तत्व वहाँ ले जाया जा करने की जरूरत है div में गिरा दिया।

तो घटना के बाद हुई है, अगर मैं क्रोम के डेवलपर उपकरण का उपयोग कर स्रोत को देखने के लिए थे मैं देखना होगा:

<div class="container"> 
    <div class="image"> 
     <img class="thumb" src="images/Koala.jpg" alt="" /> 
    </div> 
</div> 

यह संभव है?

धन्यवाद

Answer 1

यह घसीटा तत्व बढ़ना चाहिए डोम पेड़ में ड्रॉप करने योग्य।

drop: function (event, ui) { 
    $(this).append(ui.draggable); 
} 

Answer 2

ड्रॉप समारोह में, $(this) droppable खींचने योग्य स्वीकार कर रहा है, तो बस droppable को खींचने योग्य जोड़ने के लिए .append() का उपयोग करें: http://jsfiddle.net/saluce/P6TjC/

$(function() { 
    $(".image").draggable({helper: 'original'}); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      $(this).append(ui.draggable.css({position: 'static'})); 
      alert('dropped!'); 
     } 
    }); 
});​