web-dev-qa-db-fra.com

Définition de z-index sur des éléments déplaçables

J'essaie de définir l'index z sur des éléments déplaçables à l'aide de jQuery. Vous pouvez voir de quoi je parle et ce que j'ai jusqu'ici ici:

http://jsfiddle.net/sushik/LQ4JT/1/

C'est très primitif et cela pose des problèmes. Toutes les idées sur la manière dont je ferais en sorte que le dernier élément cliqué ait l'index z le plus élevé et plutôt que de réinitialiser tout le reste à un z-index de base, faites-les passer, de sorte que le deuxième au dernier cliqué ait le deuxième z-index, etc. 

Un autre problème que je rencontre est qu’il ne fonctionne que sur un événement de clic complet, mais que la fonctionnalité glissable fonctionne en cliquant et en maintenant enfoncée. Comment pourrais-je avoir la classe appliquée sur ce clic initial et ne pas attendre l'événement de relâchement du clic? 

jquerycssjquery-uidraggablez-index
33
Zac

J'ai mis à jour votre CSS et Javascript. N'utilisez pas "! Important" dans les CSS sauf si vous êtes désespéré.

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

});

Bien que cette réponse fonctionne, elle a la limite d'un nombre maximal de 2 ^ 31−1 en javascript . Refer Quelle est la valeur entière la plus élevée en JavaScript à laquelle un Nombre peut accéder sans perdre de précision? pour plus d'informations.

27
Mahesh

Tout ce que vous avez à faire est d’utiliser draggable({stack: "div"})Maintenant, lorsque vous faites glisser un div, il s’affiche automatiquement.

Consultez l'exemple de travail sur http://jsfiddle.net/LQ4JT/8/

56
Hussein

Les codes de la route sont les meilleurs. Sie müssen stackname__Ihr divsname__anstatt z-indexes zu setzen, et zweitens müssen Sie das div oben anzeigen, nachdem Sie einfach darauf geklickt und es nicht gezogen haben.

Zum Stapeln benötigen Sie aussi stack: "div" und zum Anzeigen des div-Elements oben durh ehfaches Klicken müssen Sie distance: 0 verwenden.

Standardmäßig lautet der Wert distance: 10. Das heißt, wenn Sie 10 pixels nicht ziehen, wird er nicht oben angezeigt. Nous sommes actuellement en distance: 0__ setzen, où nous sommes allés pour le moment.

Versuchen Sie den folgenden Code.

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

voici les paroles de JSFiddle.

Bearbeiten:

Drücke denRun code snippetSchaltfläche unten, um dieses eingebettete Code-Snippet auszuführen.

$(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>
7
Suhaib Janjua

Le moyen le plus simple que j'ai trouvé pour résoudre ce problème était d'utiliser les options appendTo et zIndex.

$('#box1,#box2,#box3,#box4').draggable({
  appendTo: "body",
  zIndex: 10000
});
4
Caedmon

Voici une version grandement simplifiée de la réponse 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/

Semble toujours bien fonctionner, à moins que je manque quelque chose.

0
Jehan