javascript - 我将如何在 jquery ui 中实现可拖动对象的堆叠属性

Question

我如何在 JQuery UI 中为可拖动的 div 实现堆叠属性？

如果您不明白我在说什么，请查看:http://qtip2.com/demos#section-stacking

如您所见，在上面的链接中，当您将鼠标悬停 到“提示”上时，相应的提示将转到顶部(这看起来很像增加 z-index )。

如果我有 3 个可拖动的 div，我该怎么做？

模拟例子:

$(function() {
  $(".draggable").draggable();
});

.draggable {
  width: 150px;
  height:100px;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: yellow;
}

#div3 {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="draggable">I am draggable</div>
<div id="div2" class="draggable">I am draggable too!</div>
<div id="div3" class="draggable">Don't forget about me!</div>

当我点击任何一个 div 时，我希望它们出现在前面(或者做一些类似增加 z-index 的事情)。

现在我不知道该怎么做，请提供帮助和评论! :)

Answer 1

JQuery UI draggable 有一个名为 stack 的选项，可以满足您的需要。只需设置元素需要堆叠的选择器(不必只是其他可拖动对象)，它就会为您管理 z-index。像这样:

$(function() {
  $(".draggable").draggable({
    stack: '.draggable'
    });
});

.draggable {
  width: 150px;
  height:100px;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: yellow;
}

#div3 {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="draggable">I am draggable</div>
<div id="div2" class="draggable">I am draggable too!</div>
<div id="div3" class="draggable">Don't forget about me!</div>

http://api.jqueryui.com/draggable/#option-stack