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

Question

我正在尝试用Javascript编写Solitaire纸牌游戏。对于拖放卡我使用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。然后使用点击事件，你可以简单地获得下一个兄弟姐妹，然后使用拖动的卡片的位置来对齐它下面的其他卡片。因为当你堆叠卡片时，它们会在你看到它们时在DOM中对齐。

Div＃1被拖放，然后DIv＃2被置于顶部，依此类推。那么你就可以使用click事件来定位其中一个DIV，如果它有兄弟姐妹那么抓住它们并将它们放在被拖动的卡片上。