it-swarm.com.de

Festlegen des Z-Index für ziehbare Elemente

Ich versuche, den Z-Index mit jQuery auf ziehbare Elemente zu setzen. Sie können sehen, worüber ich spreche und was ich bisher hier habe:

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

Es ist sehr primitiv und es gibt Probleme damit. Irgendwelche Ideen, wie das letzte angeklickte Element den höchsten Z-Index haben würde, und nicht den Rest auf eine Basis z-index zurückzusetzen, haben sie einen Schritt, sodass der vorletzte Klick den zweithöchsten z-index usw. hat. 

Ein anderes Problem, das ich damit habe, ist, dass es nur für ein Vollklickereignis funktioniert, die ziehbare Funktion jedoch durch Klicken und Halten. Wie kann ich die Klasse auf diesen ersten Klick anwenden lassen und nicht auf den Fall des Lösens des Klicks warten? 

33
Zac

Ich habe Ihre CSS und Javascript aktualisiert. Verwenden Sie "! Important" in css nur, wenn Sie so verzweifelt sind.

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

});

Obwohl diese Antwort funktioniert, hat sie die Begrenzung auf die maximale Anzahl von 2 ^ 31−1 in Javascript . Refer Was ist der höchste Integerwert von JavaScript, zu dem eine Zahl ohne Genauigkeit gehen kann? Für mehr Information.

27
Mahesh

Alles, was Sie tun müssen, ist draggable({stack: "div"})Now, wenn Sie ein div ziehen, wird es automatisch nach oben verschoben.

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/LQ4JT/8/

56
Hussein

Der folgende Code wird Ihre Anforderungen erfüllen. Sie müssen stackIhr divsanstatt z-indexes zu setzen, und zweitens müssen Sie das div oben anzeigen, nachdem Sie einfach darauf geklickt und es nicht gezogen haben.

Zum Stapeln benötigen Sie auch stack: "div" und zum Anzeigen der div-Elemente oben durch einfaches 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. Wenn Sie den Wert auf distance: 0 setzen, wird er nach einem einfachen Klick angezeigt.

Versuchen Sie den folgenden Code.

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

Hier arbeitet 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

Die einfachste Möglichkeit, dieses Problem zu lösen, war die Verwendung der Optionen appendTo und zIndex.

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

Hier ist eine stark vereinfachte Version von Maheshs Antwort:

$(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/

Scheint immer noch gut zu funktionieren, es sei denn, mir fehlt etwas.

0
Jehan