web-dev-qa-db-ja.com

ドラッグ可能な要素にZインデックスを設定する

JQueryを使用して、ドラッグ可能な要素にz-indexを設定しようとしています。ここで私が話していることと、これまでに私が持っていることを見ることができます：

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

非常に原始的であり、問​​題があります。最後にクリックされた要素のZインデックスが最も高くなり、残りのすべてをベースz-index、それらにステップを持たせるので、最後から2番目にクリックしたものが2番目に高いz-indexなど。

私が持っている別の問題は、フルクリックイベントでのみ機能するが、ドラッグ可能な機能はクリックして押し続けることで機能することです。最初のクリックダウンにクラスを適用し、クリックを解放するイベントを待たないようにするにはどうすればよいですか？

jquerycssjquery-uidraggablez-index
33
Zac

CSSとJavascriptを更新しました。それほど必死でない限り、CSSで「！important」を使用しないでください。

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

}）;

この答えは機能しますが、javascriptの最大数2 ^ 31-1の制限があります。 refer 精度を失うことなくNumberが移動できるJavaScriptの最大整数値は？ 詳細.

27
Mahesh

必要なことはdraggable({stack: "div"})を使用することだけです。divをドラッグすると、自動的に最上部に移動します。

http://jsfiddle.net/LQ4JT/8/ で動作例を確認してください

56
Hussein

次のコードが要件を満たします。 z-indexesを設定する代わりにstackをdivsする必要があります。次に、ドラッグせずにクリックするだけでdivを上部に表示する必要があります。

したがって、スタックするにはstack: "div"が必要で、クリックするだけでdiv要素を上部に表示するには、distance: 0を使用する必要があります。

デフォルトでは、値はdistance: 10です。つまり、ドラッグしない限り10 pixelsは、上部に表示されません。値をdistance: 0に設定すると、単純なクリック後に上部に表示されます。

次のコードを試してください。

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

ここでJSFの作業

編集：

クリック Run code snippet この埋め込みコードスニペットを実行するには、下のボタンをクリックします。

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

この問題を解決するために見つけた最も簡単な方法は、appendToおよびzIndexオプションを使用することでした。

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

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/

私が何かを逃さない限り、まだうまくいくようです。

0
Jehan