javascript - 可拖动元素上的 z-index 堆叠问题(jQuery UI)

Question

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

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

我知道出了什么问题，但不确定如何设计它才能按预期工作。

我最初尝试通过将一个类添加到悬停在 droppable 上来修复它，但这只在我必须让 draggable 至少超过 droppable 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 中明确设置)因此 draggable 的 z-index 没有取决于它是高于还是低于特定的 .main-stack

任何关于正在发生的事情以及可以采取什么措施来解决它的进一步澄清将不胜感激。

Answer 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;
}