Configuración del índice z en elementos arrastrables

Estoy tratando de establecer el índice z en elementos arrastrables usando jQuery. Usted puede ver 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 clickeado tenga el índice z más alto y en lugar de restablecer todo el resto a una base z-index, haga que pasen, por lo que el segundo al último clickeado tiene el segundo z-index más alto, etc..

Otro problema que estoy teniendo con él es que solo funciona en un evento de clic completo, pero la funcionalidad arrastrable funciona haciendo clic y manteniendo pulsado. ¿Cómo podría tener la clase aplicada en ese clic inicial hacia abajo y no esperar al evento de liberar el clic?

Author: Hussein, 2011-03-07
Source

5 answers

He actualizado tu CSS y Javascript. No use"!importante " en css a menos que estés tan desesperado.

Http://jsfiddle.net/LQ4JT/7 / 

    $(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 del número máximo de 2^31-1 en javascript. refer ¿Cuál es el valor entero más alto de JavaScript al que un Número puede ir sin perder precisión? para más información.

 27
Author: Mahesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 10:29:50

Todo lo que necesita hacer es usar draggable({stack: "div"}) Ahora, cuando arrastre un div, automáticamente llegará a la parte superior.

Compruebe el ejemplo de trabajo en http://jsfiddle.net/LQ4JT/8 /

 55
Author: Hussein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-07 08:40:26

El siguiente código cumplirá con sus requisitos. Necesita stack su divs en lugar de configurar 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.

Así que para apilar necesita stack: "div" y para mostrar el elemento div en la parte superior con solo hacer clic, debe usar distance: 0.

Por defecto el valor es distance: 10 lo que significa que hasta que no lo arrastre 10 pixels, no aparecerá en la parte superior. Al establecer el valor en distance: 0 hace que se muestre en la parte superior después de un simple clic.

Intente el siguiente código.

$('#box1,#box2,#box3,#box4').draggable({
    stack: "div",
    distance: 0
});

Trabajando Aquí.

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>
 6
Author: Suhaib Janjua,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-25 13:56:26

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
});
 4
Author: Caedmon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-10 08:50:29

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.

 0
Author: Jehan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-05 04:51:11