Question

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

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

正如您所看到的，在上面的链接中，当您hover超过＆＃34;提示＆＃34;时，相应的提示将会显示在顶部（这看起来很像{{1} }）。

如果我有3个z-index可拖动，我该如何做？

Dumie示例：

＆＃13;

div

＆＃13;

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

＆＃13;

.draggable {
  width: 150px;
  height:100px;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: yellow;
}

#div3 {
  background-color: blue;
}

＆＃13;

当我点击<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）。

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

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

如何在jquery ui中为可拖动对象实现堆叠属性

1 个答案: