Estoy tratando de establecer el índice z en elementos que se pueden arrastrar usando jQuery. Puedes ver de lo que estoy hablando y lo que tengo hasta ahora aquí:
http://jsfiddle.net/sushik/LQ4JT/1/
Es muy primitivo y hay problemas con él. Cualquier idea sobre cómo haría que el último elemento en el que se hizo clic tenga el índice z más alto y, en lugar de restablecer todo el resto a un z-index base, haga que pasen, de modo que el segundo al último en el que se hizo clic tenga el segundo z-index más alto, etc..
Otro problema que tengo es que solo funciona en un evento de clic completo, pero la funcionalidad de arrastrar funciona al hacer clic y mantener presionado. ¿Cómo podría aplicar la clase en ese clic inicial y no esperar el evento de soltar el clic?
Todo lo que necesita hacer es usar draggable({stack: "div"}) Ahora, cuando arrastre un div, aparecerá automáticamente en la parte superior.
He actualizado tu CSS y Javascript. No use "! importante" en css a menos que esté muy desesperado.
$(document).ready(function() { var a = 3; $('#box1,#box2,#box3,#box4').draggable({ start: function(event, ui) { $(this).css("z-index", a++); } }); $('#dragZone div').click(function() { $(this).addClass('top').removeClass('bottom'); $(this).siblings().removeClass('top').addClass('bottom'); $(this).css("z-index", a++); });});
Aunque esta respuesta funciona, tiene la limitación de un número máximo de 2^31−1 en javascript. referir ¿Cuál es el valor entero más alto de JavaScript al que puede ir un Número sin perder precisión? para más información.
La forma más fácil que encontré para resolver este problema fue usar las opciones appendTo y zIndex.
$('#box1,#box2,#box3,#box4').draggable({ appendTo: "body", zIndex: 10000 });