Question

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

我有三个可拖动的窗口，当点击时，特定元素堆叠在另外两个窗口的顶部。然而，堆叠顺序似乎是'＃34;重置＆＃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');
    });

Answer 1

使用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;
}

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

1 个答案: