проблема с укладкой z-index на элемент перетаскивания (jQuery UI)

Question

У меня возникла проблема в приложении пользовательского интерфейса jQuery. Я пишу (игра-пасьянс klondike), которая происходит, когда я пытаюсь перетащить часть перевернутого над стеком из одного стека в другой. Вы можете увидеть это показано на рисунке ниже:

приложение в целом можно найти в этом Fiddle: http://jsfiddle.net/damo_s/hy2dvL1u/

У меня есть представление о том, что происходит не так, но не уверен, как инженер он работает так, как ожидалось.

Первоначально я попытался исправить это, добавив класс к зависанию над droppable, но это работает только в той степени, в которой мне нужно перетащить не менее 50% по сравнению с droppable (потому что я использую режим пересечения на вариант допуска) перед тем, как перетаскиваемый идет вперед. Соответствующий код:

$('.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 стеком позиционируются абсолютно слоев со своими значениями Z-индекс (хотя явно не установлен в моем CSS) и, таким образом, z-индекс перетаскиваемого не влияет на то, будет ли он выше или ниже определенного .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; 
}