堆叠并将可拖动元素放在顶部而不影响其他元素?

时间:2017-07-30 09:13:13

标签: javascript css jquery-ui

我愚弄可拖动的元素,发现自己被困在堆叠部分。

我有三个可拖动的窗口,当点击时,特定元素堆叠在另外两个窗口的顶部。然而,堆叠顺序似乎是'#34;重置"在单击一个窗口时的另外两个。例如,如果我单击.window1并且.window2位于后面,则它最终会出现在.window3之上。

我使用带有onmouse z-index属性的javascript进行堆叠。有没有办法只在顶部点击元素堆栈而不影响其他两个?欢迎任何帮助或指向正确的方向,欢呼!

HTML:

<div class="window1">
    <div class="header">header</div>
    <div class="content">content</div>
</div>

<div class="window2">
    <div class="header">header</div>
    <div class="content">content</div>
</div>

<div class="window3">
    <div class="header">header</div>
    <div class="content">content</div>
</div>

我的javascript for drag和z-index for stacking:

    $( ".window1, .window2, .window3" ).draggable({ handle: ".header" });

    $('.window1, .window2, .window3').on('mousedown', function(event) { 
      $('.window1, .window2, .window3').css('z-index','1');
      $( this ).css('z-index','1000');
    });

1 个答案:

答案 0 :(得分:0)

使用Stack选项将当前拖动的项目放在前面而不影响其他项目:

info
$( ".window1, .window2, .window3" ).draggable({ handle: ".header", stack: ".window" });
.window1 {
  background-color: orange;
  width: 100px;
}

.window2 {
  background-color: lightgreen;
  width: 100px;
}

.window3 {
  background-color: yellow;
  width: 100px;
}