Drag image below another image using jquery draggable

jquery, jquery-ui-draggable

Solution

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);
});

Problem

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

Original source