How can I allow a user to drag content in a layer below the top layer?

I have a need to allow users to drag content that is behind other layers or visible through the transparent part of a layer.

Here's the best way I can describe it: JSFiddle Example

In the example, I want to be able to drag layer 2 around in between layers 1 and 3. I'm not sure this is even possible. It's easy enough to make all of the layers draggable, but I need layers 1 and 3 to stay still while a user positions layer 2.开发者_开发知识库

You can create something like a pipe by forwarding any event of interest to that element. This can easily be done by invoking jQuerys .trigger()^help

var $layer2 = $('div#container>#layer-2'),
    $layer3 = $('#layer-3');

$layer3.bind('click mousedown mouseup', function(e) {
    $layer2.trigger(e);
});
$layer2.draggable();

Demo: http://jsfiddle.net/Tfk2p/3/

This is just a demonstration. In production code you should store a reference for the target element and only forward events over that reference. (updated that)