如何在jqueryui中实现可拖动对象的堆叠属性

How would I implement stacking properties to draggable objects in jquery ui

本文关键字：对象 属性 拖动 jqueryui 实现      更新时间：2023-09-26

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

如果你不明白我到底在说什么，请查看：http://qtip2.com/demos#section-堆叠

正如您所看到的，在上面的链接中，当您在"提示"上hover时，相应的提示将转到顶部（看起来很像递增z-index）。

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

Dumie示例：

$(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的事情）。

现在我不知道如何做到这一点，请帮助和评论！：）

JQuery UI draggable有一个名为stack的选项，可以执行您需要的操作。只需设置元素需要堆叠的选择器（不必只有其他可拖动项），它就可以为您管理z索引。像这样： 

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

相关文章：