JQuery 可拖动的 div

Posted

技术标签:

【中文标题】JQuery 可拖动的 div【英文标题】:JQuery draggable divs 【发布时间】:2010-10-12 11:57:25 【问题描述】:

我有一个应用程序,其界面基于带有可拖动标签的典型操作系统用户界面。

我想让选项卡像操作系统中的窗口一样,使最后点击的选项卡/窗口出现在任何其他窗口的“顶部”。

我知道这与元素的 z-index 有关。这是代码的简化版本:

<div class="tab">
content
</div>

$('.tab').draggable( zIndex: 1000000 );

The desired behaviour occurs when the tab is in the act of being dragged ie it appears 'above' all elements as it is dragged around the page, but once the mouse button is let go the dragged div falls behind again.

有没有办法实现上述行为?

谢谢

【问题讨论】:

【参考方案1】:

感谢您的快速回复。我找到了一种简单的方法,我完全忽略了 JQuery 文档。

使用堆栈选项:

$('.tab').draggable( stack:  group: '.tab', min: 50 );

【讨论】:

【参考方案2】:

拖动完成后手动设置 div 的 css 的 z-index。

Check it out here.

【讨论】:

以上是关于JQuery 可拖动的 div的主要内容,如果未能解决你的问题,请参考以下文章

拖动时jQuery可拖动克隆大小

带有可点击对象的jQuery可拖动列表 - 防止点击拖动

Jquery 可拖动占位符

克隆时的jQuery可拖动元素不可拖动

jQuery:可拖动连接到可排序。可拖动项目与可排序列表具有不同的 DOM

jQuery 可拖动和可拖放,在可拖动 ul 上滚动