Drag image below another image using jquery draggable

Question

I have a background image which has a hole into, so that we are able to see whats below it. I place another image below background image, so that its visible through the hole. Now i need to drag that below image from the transparent hole.

Background image:

I am placing another image behind it using z-index and associating draggable with it. I want the below image to be draggable if i drag on the circular hole. Currently it wont happen as i have associated draggable with another div which is behind and i am dragging on div above it. How can i make the drag event on above div get propagated to below div and it gets dragged?

I hope i am clear here.

my div's:

<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: Any other approach to achieve this can also be accepted. Added the JsFiddle example

EDIT: Asad has given nice solution below, but it doesn't work in IE and Opera. Though this can be achieved by using trigger. just add this code in Asad's solution:

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

and remove:

pointer-events: none

from CSS. you can find working example here(cross browser): JsFiddle.

Hope this helps some else too :)

Answer 1

Here is a working example. I have simply set pointer-events:none; on the bg div and contained image.

EDIT: As kailash has pointed out below, my original suggestion is more browser compatible, so I am reposting it here for posterity:

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

Answer 2

There is a drag event which is fired when moving the above div. Use that and just change the position of the below image according to the position of the div