单人纸牌游戏中的 jQuery UI 拖动纸牌堆答案

【问题标题】：jQuery UI drag pile of cards in Solitaire card game单人纸牌游戏中的 jQuery UI 拖动纸牌堆
【发布时间】：2014-09-20 04:04:03
【问题描述】：

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

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

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

当我将卡片移动到无效的 droppable 时，它应该被移回我现在实现的原始位置：

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

当我移动一堆卡片时，这应该仍然有效。

有没有人知道什么是一种干净的方法来拖动一堆卡片，当在任意点挑选时？

【问题讨论】：

【解决方案1】：

你可以使用 jQuery 的 next() - jQuery Next Function。然后使用单击事件，您可以简单地获取下一个兄弟，然后使用拖动卡片的位置来对齐其下方的其他卡片。因为当你堆叠卡片时，它们在 DOM 中是对齐的。

Div#1 被拖放，然后 DIv#2 被放置在顶部，依此类推。因此，您将使用 click 事件来定位其中一个 DIV，如果它有兄弟姐妹抓住它们并将它们与被拖动的卡一起定位。

【讨论】：

我试过这个，但它会导致还原问题。当进行了无效的移动时，jQuery 只会将原始项移回，而不是兄弟项。
如果您看到这个stackoverflow.com/questions/14571919/… 问题，它谈到了向还原选项添加功能。您可以在其中添加一个函数，如果它是无效的放置，则返回 true，并且还会触发兄弟姐妹返回到原始位置。 - 这是讨论中的 JSFiddle jsfiddle.net/mori57/Xpscw

【解决方案2】：

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

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

此代码将卡片添加到该行的最后一张卡片。当父级被拖动时，子级会自动跟随，无需手动处理每张卡片的坐标。

【讨论】：