/ / jquery ui droppable: ओवरफ्लो के साथ एक div के बाहर एक तत्व को कैसे ड्रॉप करें: छिपा हुआ? - जावास्क्रिप्ट, jquery, css, jquery-ui, jquery-ui-droable

jquery ui droppable: ओवरफ्लो के साथ एक div के बाहर एक तत्व ड्रॉप कैसे करें: छुपा? - जावास्क्रिप्ट, jquery, सीएसएस, jquery-ui, jquery-ui-droppable

मुझे पता है कि कैसे उपयोग करें jquery उई ड्रापेबल.

लेकिन मैं ऐसा करने के लिए संभव नहीं है, तो मैं नहीं कर रहा हूँ:

इस बेला के साथ एक जीवंत उदाहरण देखें

मेरे पास div में तत्व की एक सूची है जो अतिप्रवाह में है: छिपा हुआ:

एचटीएमएल:

<div id="list">
<p id="draggable_1">Element 1</p>
<p id="draggable_2">Element 2</p>
<p id="draggable_3">Element 3</p>
</div>

सीएसएस:

#list
{
overflow:hidden;
}

जावास्क्रिप्ट / jQuery:

$("#draggable_1").draggable();
$titre_track_1.droppable({
drop: function () {
alert("dropped");
}
});

अगर मैं div #list के बाहर draggable_1 जैसे तत्व को छोड़ने की कोशिश करता हूं, तो तत्व दिखाई नहीं देता है। यह तर्क है क्योंकि अभिभावक अतिप्रवाह में है: छिपा हुआ

क्या आपको पता है कि यह उस तत्व को बाहर निकालना संभव है? मुझे इस div को अतिप्रवाह के साथ रखने की आवश्यकता है: छिपा हुआ

उत्तर:

उत्तर № 1 के लिए 4

आप ड्रैग स्टार्ट पर क्लोन एलीमेंट को क्लोन करने वाले तत्व का उपयोग कर सकते हैं और इसे शरीर के साथ जोड़ सकते हैं appendTo विकल्प:

$("#draggable_1").draggable({
helper: "clone",
appendTo: "body",
start: function(e){
$(this).css("visibility", "hidden");
},
stop: function(){
$(this).css("visibility", "visible");
}
});

http://jsfiddle.net/xYQ9c/