jquery - ejemplos - Configurar z-index en elementos arrastrables
jquery draggable scroll (5)
Aquí hay una versión muy simplificada de la respuesta de Mahesh:
$(document).ready(function() {
var a = 1;
$(''#box1,#box2,#box3,#box4,#box5,#box6,#box7'').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
});
http://jsfiddle.net/LQ4JT/713/
Todavía parece funcionar bien, a menos que me esté perdiendo algo.
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 eso. Cualquier idea sobre cómo haré que el último elemento cliqueado tenga el índice z más alto y en lugar de restablecer todo el resto a un z-index base, haga que lo hagan, por lo que el segundo al último clic tiene 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 que se puede arrastrar funciona haciendo clic y manteniendo presionada. ¿Cómo podría aplicar la clase en ese clic inicial y no esperar el evento de soltar el clic?
El siguiente código cumplirá con sus requisitos. Necesita stack sus divs lugar de establecer z-indexes y, en segundo lugar, debe mostrar el div en la parte superior después de simplemente hacer clic en él y no arrastrarlo.
Entonces, para apilar necesitas stack: "div" y para mostrar el elemento div en la parte superior simplemente haz click, necesitas usar la distance: 0 .
Por defecto, el valor es distance: 10 que significa que hasta que no lo arrastre 10 pixels , no aparecerá en la parte superior. Al establecer el valor a distance: 0 hace aparecer en la parte superior después de un simple clic.
Pruebe el siguiente código.
$(''#box1,#box2,#box3,#box4'').draggable({
stack: "div",
distance: 0
});
Editar:
Haga clic en el botón Ejecutar fragmento de código a continuación para ejecutar este fragmento de código incrustado.
$(document).ready(function() {
$(''#box1,#box2,#box3,#box4'').draggable({
stack: "div",
distance: 0
});
$(''#dragZone div'').click(function() {
$(this).addClass(''top'').removeClass(''bottom'');
$(this).siblings().removeClass(''top'').addClass(''bottom'');
});
});
#box1 {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
z-index: 0
}
#box2 {
width: 150px;
height: 150px;
background-color: green;
position: absolute;
top: 20px;
left: 50px;
z-index: 0
}
#box3 {
width: 150px;
height: 150px;
background-color: yellow;
position: absolute;
top: 50px;
left: 100px;
z-index: 0
}
#box4 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 70px;
left: 200px;
z-index: 0
}
.top {
z-index: 100!important;
position: relative
}
.bottom {
z-index: 10!important;
position: relative
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="dragZone">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
He actualizado su CSS y Javascript. No use "! Important" en css a menos que esté tan 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 llegar 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
});
Todo lo que necesitas hacer es usar " draggable({stack: "div"}) Ahora cuando arrastres un div, automáticamente llegarás a la cima.