Dragging layers with jQuery

I have two layers (DIVs) with different开发者_开发百科 Z-index (1&2) on my screen. I would like to be able to drag the lower layer (the one with z-index: 1) using jQuery. How would I achieve that? HOw to pass the mouse movement and clicks to the lower layer?

You can easily set a DIV to be draggable using jQuery UI. Simply call

$("#mydiv").draggable();

The z-index will be whatever you give the DIV in your CSS. Make sure you set a position attribute on both DIV's (either absolute or relative, it doesn't matter). If you want to pass the drag event to the bottom layer, capture the event for the top layer and then use .trigger() to pass it along, as below.

$("#top").mousedown(function(event){
    $("#bottom").trigger(event);
});

You should probably also add some code to check that, on the mousedown of the top layer, the mouse is actually over the lower layer.