javascript - 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 嵌套卡片，如 Fiddle 所示:http://jsfiddle.net/HY8g7/3/

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

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