可拖动元素上的 z-index 堆叠问题（jQuery UI）答案

【问题标题】：z-index stacking issue on draggable element (jQuery UI)可拖动元素上的 z-index 堆叠问题（jQuery UI）
【发布时间】：2015-09-15 01:39:29
【问题描述】：

我正在编写的 jQuery UI 应用程序（一个克朗代克纸牌游戏）中遇到问题，当我试图将翻转堆栈的一部分从一个堆栈拖到另一个堆栈时会发生这种情况。您可以在下面的屏幕截图中看到这一点：

整个应用程序可以在这个 Fiddle 中找到：http://jsfiddle.net/damo_s/hy2dvL1u/

我知道出了什么问题，但不确定如何对其进行设计使其按预期工作。

我最初尝试通过向悬停的可拖放对象添加一个类来修复它，但这仅适用于我必须使可拖动对象比可拖放对象至少高出 50%（因为我在容差上使用相交模式选项）在可拖动对象出现之前。相关代码：

$('.drop-area').droppable({
    over: function (event, ui) {
        $(this).closest('.main-stack').addClass('droppable-above');
    },
    out: function (event, ui) {
        $('.main-stack').removeClass('droppable-above');
    },
    drop: function (event, ui) {
        $('.main-stack').removeClass('droppable-above');
...

我对发生的事情的猜测是 .main-stack 类的堆栈是绝对定位的层，具有自己的 z-index 值（尽管没有在我的 css 中明确设置），因此可拖动的 z-index 没有取决于它是在特定的 .main-stack 之上还是之下

任何关于发生了什么以及可以采取哪些措施来解决它的进一步说明将不胜感激。

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

我发布问题后不久就找到了解决方案。

我在开头添加了这个：可拖动初始化的方法：

if ($(this).closest('.main-stack').length) {
    $(this).closest('.main-stack').addClass('dragging-card');
    $(this).closest('.main-stack').siblings().removeClass('dragging-card');
}

所以我的代码变成了：

 $('.card').draggable({
    start: function (event, ui) {
        positionTop = $(this).css('top');

        // On drag start check each stack for an empty stack
        $('.main-stack').each(function () {
            if (!$(this).find('.card').length) {
                $(this).droppable('option', 'disabled', false);
                return false;
            }
        });

        // If dragging from a main stack
        if ($(this).closest('.main-stack').length) {
            // Set the class of the draggable's containing stack
            $(this).closest('.main-stack').addClass('dragging-card');
            $(this).closest('.main-stack').siblings().removeClass('dragging-card');
        }

    },

我的 CSS 更改为：

.under-card {
    z-index: 1000!important;
}

.ui-front, .top-card {
    z-index: 1001!important;
}

.dragging-card {
    z-index: 1002!important;
}

.ui-draggable-dragging {
    z-index: 1003!important;
}

【讨论】：