我如何在 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
的事情)。
现在我不知道该怎么做,请提供帮助和评论! :)
最佳答案
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>
关于javascript - 我将如何在 jquery ui 中实现可拖动对象的堆叠属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34710093/