在jQuery中拖动时元素不能有z-index最大值

Posted 2023-05-08

【中文标题】在jQuery中拖动时元素不能有z-index最大值

【英文标题】：element cant have z-index maximum when drag in jQuery

【发布时间】：2012-12-07 18:43:08

【问题描述】：

我有一个可拖动的项目，但当我拖动它时它位于其他 html 元素下，即使我设置了.item_dragable cursor: move; z-index: 2147483646; 和事件可拖动：

jQuerydragable.draggable(
    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move",
    zIndex: 2147483647
);

有什么问题吗？我使用最新的 jQuery 和 jQuery ui

谢谢

【问题讨论】：

你检查过父元素吗？请提供一个 jsfiddle 或工作示例。

我的可拖动项在另一个元素中，它的 z-index 是否保护父元素？

是的，确实如此！具有较低 z-indexes 的父元素将在 childs z-index 之前（如果您理解的话，与父母兄弟姐妹和父母父母相比）。

是的，所有浏览器的最大zindex是2147483647，我已经设置好了

如何在不更改父索引的情况下设置可拖动项目 z-index 最大值

【参考方案1】：

让您的可拖动项目超越其他所有内容的最佳方法是使用选项appendTo（请参阅jQuery UI doc）并将其设置为"body"，如下所示：

jQuerydragable.draggable(
    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move",
    zIndex: 100000,
    appendTo: "body"
);

当然还要设置一个足够大的 z-index 以高于所有其他的。