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

【问题标题】：element cant have z-index maximum when drag in jQuery在jQuery中拖动时元素不能有z-index最大值
【发布时间】：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 最大值

标签： jquery jquery-ui drag-and-drop

【解决方案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 以高于所有其他的。

【讨论】：