Is it possible to have a Jquery Draggable object under an other div

Question

I'm attempting to create a template system where an uploaded jpg is then placed on a template.

Test example:

http://www.silverink.com/TEMP/jqueryTest/

The problem is that I want to have a mask on the top most layer but be able to click and drag the lower layer. At present I'm having to either click the area to bring it to the fore then drag or have it at the fore transparent.

Any ideas or suggestions most welcome!!

Answer 1

There is actually an easy way: create the draggable as usual for the occluded element, and add a mousedown event handler on the occluding image to delegate the event to the draggable:

$('#occluder').mousedown(function(ev) {
    $('#draggable').trigger(ev);
});

Answer 2

Have managed to solve by creating a layer on the very top with the exact position and dimensions of the image on the lower layer. Then make top layer draggable and on the drag function update the position of the image layer.

Answer 3

You are using a transparent png file for faded masking so I it's not possible to do what you are trying to. Even png is transparent in the middle still it's a part of image and block the layers below.

But you may cut that png into 4 different files and place them around this http://jsbin.com/etale4/2/edit