Trascina l'immagine sotto un'altra immagine usando jquery draggable

Question

Ho un'immagine di sfondo che ha un buco, in modo che siamo in grado di vedere cosa è sotto di esso. Posiziono un'altra immagine sotto l'immagine di sfondo, in modo che sia visibile attraverso il foro. Ora ho bisogno di trascinare l'immagine qui sotto dal foro trasparente.

Immagine di sfondo:

mi pongo un'altra immagine dietro di esso utilizzando z-index e associando trascinabile con esso. Voglio che l'immagine qui sotto sia trascinabile se trascino sul foro circolare. Attualmente non succederà perché ho associato trascinabile con un altro div che è dietro e sto trascinando su div sopra di esso. Come posso rendere l'evento di trascinamento sopra sopra div essere propagato al di sotto div e viene trascinato?

Spero di essere chiaro qui.

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

EDIT: Qualsiasi altro approccio per raggiungere questo obiettivo possono anche essere accettati. Aggiunto l'esempio JsFiddle

MODIFICA: Asad ha fornito una soluzione carina di seguito, ma non funziona in IE e Opera. Anche se questo può essere ottenuto usando il grilletto. basta aggiungere questo codice in soluzione di Assad:

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

e rimuovere:

pointer-events: none 

da CSS. puoi trovare esempi di lavoro qui (browser cross): JsFiddle.

Spero che questo aiuti un po 'troppo il resto :)

Answer 1

Ecco un lavoro example. Ho semplicemente impostato pointer-events:none; sul div bg e l'immagine contenuta.

EDIT: Come Kailash ha sottolineato di seguito, il mio suggerimento originale è più browser compatibile, quindi sono reinserire qui per i posteri:

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

Answer 2

C'è una drag event che viene licenziato quando si sposta il div sopra. Usalo e modifica semplicemente la posizione dell'immagine sottostante in base alla posizione del div