Bild unter ein anderes Bild ziehen mit jquery ziehbar

Question

Ich habe ein Hintergrundbild, das ein Loch hat, so dass wir sehen können, was darunter ist. Ich platziere ein anderes Bild unter dem Hintergrundbild, so dass es durch das Loch sichtbar ist. Jetzt muss ich das Bild unter dem transparenten Loch ziehen.

Hintergrundbild:

ich ein anderes Bild bin Platzierung dahinter z-index und Zuordnen ziehbar mit ihm mit. Ich möchte, dass das untere Bild ziehbar ist, wenn ich auf das kreisförmige Loch ziehe. Momentan passiert es nicht, da ich mit einem anderen div, das dahinter steckt, ziehbar bin, und ich schiebe div darüber. Wie kann ich das Ziehereignis auf über Div zu unterhalb von Div verbreiten und es wird gezogen?

Ich hoffe, ich bin hier klar.

meine divs:

<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> 

EDIT: Jeder andere Ansatz, um dies zu erreichen, kann auch angenommen werden. Das JsFiddle Beispiel

hinzugefügt BEARBEITEN: Asad hat unten nette Lösung gegeben, aber es funktioniert nicht in IE und Opera. Dies kann jedoch mit Trigger erreicht werden. fügen Sie einfach diesen Code in Assads Lösung:

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

und entfernen:

pointer-events: none 

von CSS. Hier finden Sie ein Arbeitsbeispiel (Cross-Browser): JsFiddle.

hoffe, das hilft einige sonst auch :)

Answer 1

Hier ist ein funktionierendes example. Ich habe einfach pointer-events:none; auf das bg Div und enthaltene Bild gesetzt.

EDIT: Wie kailash unten hervorgehoben hat, ist mein ursprünglicher Vorschlag mehr Browser kompatibel, so dass ich es hier für die Nachwelt bin reposting:

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

Answer 2

Es gibt eine drag event ist, die ausgelöst wird, wenn die oben div bewegt. Verwenden Sie das und ändern Sie einfach die Position des unteren Bildes entsprechend der Position des Div