jQuery UI拖动纸牌堆中的纸牌纸牌游戏

jQuery UI drag pile of cards in Solitaire card game

本文关键字：纸牌游戏 UI jQuery 拖动      更新时间：2023-09-26

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

问题来了。假设我有三张牌堆叠在一列:1号牌、2号牌和3号牌相互叠在一起。当我拖动纸牌1时，纸牌2和纸牌3也需要跟随纸牌1。

为了实现这一点，我已经尝试使每个后继卡是前一张卡的子卡。不幸的是，这种方法会导致大量的DOM操作，并且拖拽不能像预期的那样工作。

当我把一张牌移动到一个无效的可掉落物时，它应该被移动回原来的位置，我现在用:

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

当我移动一叠纸牌时，这应该仍然可以工作。

有没有人有一个想法，可以是一个干净的方法来拖动周围的一堆牌，当选择在任意点?

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

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

此代码将该卡添加到该行的最后一张卡。当父卡被拖动时，子卡将自动出现，而不需要手动处理每个卡的坐标。

你可以使用jQuery的next() - jQuery next函数。然后使用click事件，你可以简单地获得下一个兄弟，然后使用被拖动的卡的位置来对齐它下面的其他卡。因为当你堆叠卡片时，它们会像你看到的那样在DOM中对齐。

Div#1被拖放，然后Div# 2被放在顶部，依此类推。然后你会使用click事件去瞄准其中一个DIV如果它有兄弟，抓取那些并将它们与被拖动的纸牌放在一起。

相关文章：