jQuery UI在纸牌纸牌游戏中拖动纸牌

Question

我正在尝试用Javascript编写纸牌纸牌游戏。 对于拖放卡，我使用jQueryUI。 如http://jsfiddle.net/HY8g7/1/中所示，您可以将纸牌拖到在纸牌游戏中将纸牌堆叠的列中。

问题来了。 假设我将所有三张卡堆叠在一列中：卡1，卡2和卡3彼此重叠。 当我拖曳卡片1时，卡片2和3在拖曳等时也需要跟随卡片1。

为了实现这一点，我已经尝试将每个后继卡作为前一张卡的子卡。 不幸的是，此方法导致大量的DOM操作，并且拖动无法按预期进行。

当我将卡移到无效的可放下时，应将其移回到我现在可以实现的原始位置：

$('.card').draggable({
    revert: 'invalid'
});

当我移动一叠卡时，这仍然应该起作用。

有谁知道在任意点取走一堆纸牌的干净方法是什么？

Answer 1

事实证明，最有效的方法是使用DOM来嵌套卡片，如本小提琴中所示： http : //jsfiddle.net/HY8g7/3/

card.detach()
    .appendTo(cardsInColumn.last());

此代码将卡添加到该行的最后一张卡。 拖动父母时，孩子会自动走动，而无需手动处理每张卡的坐标。

Answer 2

您可以使用jQuery的next（）- jQuery Next Function 。 然后，使用click事件，您可以简单地获取下一个同级，然后使用拖动的卡的位置将其下方的其他卡对齐。 因为当您堆叠卡片时，它们如您所见在DOM中对齐。

Div＃1被拖放，然后DIv＃2被放置在顶部，依此类推。 因此，您将使用click事件来定位DIV之一，如果它具有同级，则抓住它们并将其与正在拖动的卡放置在一起。