javascript - 将draggable div按顺序放入droppable div

Question

所以，我正在做纸牌游戏，但我的 droppables div 遇到了问题。我有 26 个可拖动的 div 和 2 个可放置的 div，每张卡都有一个类型和一个值。目标是通过 droppables div 放置 13 张卡牌，并且每张卡牌的类型必须相同。我想要的是能够将卡片放入 droppable 中，并且只能从小到大放置。对我来说做到这一点相当困难，只是因为我是初学者，而且我迷失了可放置 div 中的所有选项。有人可以帮助我吗？

Answer 1

首先我创建了 div html

 <div class="table">
    <div class="droppable" id="high_frame1"></div>
    <div class="droppable" id="high_frame2"></div>
    <div id="aceofheart" class="carte" ></div>
    <div id="aceofspade" class="carte"></div>
    <div id="aceofdiamond" class="carte" ></div>
    <div id="twoofheart" class="carte" ></div>
    <div id="treeofheart" class="carte" ></div>
    <div id="fourofheart" class="carte" ></div>
    <div id="fiveofheart" class="carte" ></div>
    <div id="sixofheart" class="carte" ></div>

在我制作了一张 javascript 对象卡之后，再制作一张类型卡和值表

var TYPE = {
     SPADE: 1,
     HEART: 2,
     CLUB: 3,
     DIAMOND: 4
 };

var VALUES = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K'];

function Card(type , val) 
{
    this.type = type;
    this.val = val;
}

我为每个卡片 div 创建了一个变量

$AceOfSpade= $('#aceofspade').data('card',new Card(TYPE.SPADE, VALUES[0]));
$AceOfDiamond= $('#aceofdiamond').data('card',new Card(TYPE.DIAMOND, VALUES[0]));
$AceOfHeart= $('#aceofheart').data('card',new Card(TYPE.HEART, VALUES[0]));
$TwoOfHeart= $('#twoofheart').data('card',new Card(TYPE.HEART, VALUES[1]));
$ThreeOfHeart= $('#treeofheart').data('card',new Card(TYPE.HEART, VALUES[2]));
$FourOfHeart= $('#fourofheart').data('card', new Card(TYPE.HEART, VALUES[3]));
$FiveOfHeart= $('#fiveofheart').data('card',new Card(TYPE.HEART, VALUES[4]));
$SixOfHeart= $('#sixofheart').data('card',new Card(TYPE.HEART, VALUES[5]));

我让它们可拖动和可放置

$('.card').draggable({revert : 'invalid', snap : '.droppable' , snapMode:'inner',snapTolerance : 50});
$('.droppable').droppable({
    accept : 'div.carte',
    drop : function(){
        alert('i'm in');
        return true;
    }

但是关于我的可放置 div，我真的不知道如何使我的条件仅 接受每 13 个 div 之一