How to drag an element with z-index < 0

Question

I'd like to be able to drag elements that are under a main div.

The main div is a frame so the user can drag his photo under de frame to set the best position.

The code: http://jsfiddle.net/Mw86p/46/

Any help?

Thanks

Answer 1

CSS3 has an attribute called pointer-events. If you set this to none, the element will not respond to click events, i.e. let them pass through:

#divProductFrame {
   pointer-events: none;   
}

Demo: http://jsfiddle.net/puKBc/1/

Aside from this, there is no easy way to do this. Most of the other ways involve using jQuery to create transparent "helper" elements on top of the frame, which then move their coordinating image when they are dragged.

Here is a quick (i.e. not perfect) example of the jQuery way:

http://jsfiddle.net/WbpTz/2/