Question

Example code so I can start explaining this problem:

<div style="z-index:5">5</div>
<div style="z-index:2">2</div>
<div style="z-index:1">1</div>
<div style="z-index:4">4</div>
<div style="z-index:3">3</div>

(z-index values do not matter, and their order, even less. Just example code)

Problem: I want to select (either using CSS or JS with jQuery) the DIV with highest z-index value. In the case above, I want to select the first one, because it’s z-index 5 is higher than all the others’ z-indexes.

Is there a way to do this?
Extra information: I’m writing a Simple Window Manager with jQuery + jQuery UI, and the z-indexes are assigned by the stack option in .draggable.
I can’t seem to find a way to make jQuery to assign the last dragged element a class either, so I’m going by the highest z-index way. Any help please? Thanks.

Answer 1

I’m sure you could use the stop event to gain access to the recently dragged item, i.e.:

$('.selector').draggable({
   stop: function(event, ui) {
      $(event.target).addClass('justDragged');
   }
});

If you wish to see all functions/variables bound to event, you could use the following:

var str = '';
for (i in event) {
    str += i + ', ';
}
alert(str);

This should give you a good indication of what’s available to you in any number of jQuery callback params.