jquery - ejemplos - Configurar z-index en elementos arrastrables

jquery draggable scroll

Question

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?

Answer 1

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.

Answer 2

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
});

Trabajando JSFiddle 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>

Answer 3

He actualizado su CSS y Javascript. No use "! Important" en css a menos que esté 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 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.

Answer 4

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
});

Answer 5

Todo lo que necesitas hacer es usar " draggable({stack: "div"}) Ahora cuando arrastres un div, automáticamente llegarás a la cima.

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