Question

所以，我正在进行纸牌游戏，而且我的droppables div存在问题。我有26个可拖动的div和2个droppable，每张卡都有一个类型和一个值。目标是通过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中的一个

在droppable div中按顺序放置可拖动的div

1 个答案: