按顺序将可拖动的 div 放入可放置的 div答案

【问题标题】：Put draggable div by order in droppable div按顺序将可拖动的 div 放入可放置的 div
【发布时间】：2014-04-13 11:31:33
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html

【解决方案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;
    }

但是关于我的 droppable div 我真的不知道如何让我的条件只接受每 13 个 div 中的一个

【讨论】：