jquery draggable

Question

का उपयोग कर किसी अन्य छवि के नीचे छवि खींचें मेरे पास एक पृष्ठभूमि छवि है जिसमें छेद है, ताकि हम इसे नीचे देख सकें। मैं पृष्ठभूमि छवि के नीचे एक और छवि रखता हूं, ताकि यह छेद के माध्यम से दिखाई दे। अब मुझे उस छवि को पारदर्शी छेद से खींचने की जरूरत है।

पृष्ठभूमि छवि:

मैं एक और छवि रखने कर रहा हूँ के पीछे यह z- सूचकांक का उपयोग कर और इसके साथ खींचने योग्य जोड़। यदि मैं परिपत्र छेद पर खींचता हूं तो मैं नीचे की छवि को खींचने योग्य बनाना चाहता हूं। वर्तमान में यह ऐसा नहीं होगा क्योंकि मैंने ड्रैगगेबल को एक और div के साथ जोड़ा है जो पीछे है और मैं इसके ऊपर div पर खींच रहा हूं। मैं उपरोक्त div पर ड्रैग इवेंट कैसे बना सकता हूं, नीचे div को प्रचारित किया जा सकता है और इसे खींच लिया जाता है?

मुझे आशा है कि मैं यहां स्पष्ट हूं।

मेरी div के:

<div class="container"> 
<div id="screen"> 
    <img src="kailash.jpg" class="drag-image" id="draggable"/> 
</div> 
<div id="bg"> 
    <img src="final.png"/> 
</div> 
</div> 

संपादित करें: किसी भी अन्य दृष्टिकोण इस लक्ष्य को हासिल करने के लिए भी स्वीकार किया जा सकता है। JsFiddle उदाहरण

संपादित करें: असद ने नीचे अच्छा समाधान दिया है, लेकिन यह आईई और ओपेरा में काम नहीं करता है। हालांकि यह ट्रिगर का उपयोग करके हासिल किया जा सकता है। सीएसएस से

pointer-events: none 

: सिर्फ असद के समाधान में इस कोड जोड़ें:

$("#bg").mousedown(function(event){ 
    $("#draggable").trigger(event); 
}); 

और हटा दें। आप यहां काम कर रहे उदाहरण (क्रॉस ब्राउज़र) पा सकते हैं: JsFiddle।

आशा यह कुछ और को भी मदद करता है :)

Answer 1

की स्थिति के अनुसार नीचे दी गई छवि की स्थिति को बदलें, यहां एक काम कर रहे example है। मैंने बस बीजी div और निहित छवि पर pointer-events:none; सेट किया है।

संपादित करें: जैसा कि कैलाश नीचे बताया गया है, अपने मूल सुझाव अधिक ब्राउज़र संगत है, तो मैं इसे यहाँ भावी पीढ़ी के लिए reposting हूँ:

$('#bg').mousedown(function(ev) { 
    $('#screen').trigger(ev); 
}); 

Answer 2

एक drag event जो जब ऊपर div चलती निकाल दिया जाता है। इसका उपयोग करें और div