可拖动元素的z-index层叠问题（jQuery UI）

Question

我正在编写一个jQuery UI 应用程序（纸牌游戏Klondike），在尝试将翻转的一叠牌中的一部分从一叠牌拖动到另一叠牌时出现了问题。如下图所示：

该应用程序的完整代码可以在该Fiddle中找到：http://jsfiddle.net/damo_s/hy2dvL1u/ 我知道出了什么问题，但不确定该如何修复它以使其正常工作。

最初，我尝试通过给被悬停的可放置元素添加class来解决它，但这只适用于当可拖拽元素至少50％在可放置元素上方（因为我在tolerance选项上使用了交集模式），拖拽元素才会移动到最前面。相关代码：

$('.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是否在其上方或下方无关。

如果需要进一步澄清情况并了解如何修复它，将不胜感激。

- damo-s

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

- damo-s