在不影响其他人的情况下堆叠和放置可拖动元素？答案

【问题标题】：Stacking and placing draggable elements on top without affecting others?在不影响其他人的情况下堆叠和放置可拖动元素？
【发布时间】：2017-07-30 21:36:29
【问题描述】：

我在玩可拖动元素，发现自己卡在了堆叠部分。

我有三个可拖动的窗口，当单击其他两个顶部的特定元素堆栈时。然而，当单击窗口时，其他两个的堆叠顺序似乎被“重置”了。例如，如果我点击 .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 用于拖动和 z-index 用于堆叠：

    $( ".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');
    });

【问题讨论】：

这只是完成任务的建议。 jsPlumb 库有一些非常简洁的功能来实现这一点，而无需手动担心可拖动元素堆叠和 z-index 问题。 Check this out

标签： javascript css jquery-ui

【解决方案1】：

使用Stack 选项将当前拖动的项目置于最前面，而不影响其他项目：

$( ".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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div class="window window1">
    <div class="header">header</div>
    <div class="content">content</div>
</div>

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

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

【讨论】：