我正在编写一个jQuery UI 应用程序(纸牌游戏Klondike),在尝试将翻转的一叠牌中的一部分从一叠牌拖动到另一叠牌时出现了问题。如下图所示:
该应用程序的完整代码可以在该Fiddle中找到:http://jsfiddle.net/damo_s/hy2dvL1u/ 我知道出了什么问题,但不确定该如何修复它以使其正常工作。
最初,我尝试通过给被悬停的可放置元素添加class来解决它,但这只适用于当可拖拽元素至少50%在可放置元素上方(因为我在tolerance选项上使用了交集模式),拖拽元素才会移动到最前面。相关代码:
该应用程序的完整代码可以在该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是否在其上方或下方无关。
如果需要进一步澄清情况并了解如何修复它,将不胜感激。