Question

I have a very specific problem which don’t seem to be asked before – at least I didn’t found anything. Whatever, here’s the situation:

I have n draggable divs. Those divs containing lists, which can be edited by doubleclick, they are sortable and on and on and on – you see you can do a bit within those containers.

Now my Problems:
First, as part of JQuerys draggable, I can auto-set the z-index to the highest value of all elements – but only when it was dragged. With a simple click within the event-area, the z-index is set to auto which doesnt mean that the “clicked” element will be shown on top.

The second and bigger problem is, that it seems to be impossible to get any handler on the div to get it to the top without modifying every handler which sets focus to the div or any of its childs.

Are there any suggestions for how I can add something like a handle to the complete div which will always be called when clicking anywhere on it?

Thanks a lot,

Nurickan

Answer 1

If I understand your problem you could use the click and focus events to update the z-index. The focus will fire whenever a child element in the div gets focus.

$("div").draggable(
    {start:updateContent}
);
$("div").click(updateContent);
$("div").focus(updateContent);

function updateContent()
{
    $("div").css("z-index", 1);
   $(this).css("z-index",2);
}

​
Sample fiddle: http://jsfiddle.net/Cwp2e/14/