CODEWITHSUNDEEP
javascriptjqueryhtml
user3525616
user3525616

Reputation: 121

Put draggable div by order in droppable div

So, I'm doing a card games and I've a problem with my droppables divs. I've 26 draggable divs and 2 droppable, each card has a type and a value. The goal is to put 13 cards by droppables divs and each card has to be of the same type . What I want is to be able to put cards in droppable only from smaller to bigger . It's pretty difficult for me to do it only because I'm beginner and I'm lost with all options in droppable divs. Is there someone able to help me?

Upvotes: 1

Views: 93

Answers (1)

user3525616
user3525616

Reputation: 121

in first i've created 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>

after i've make a javascript object card ,another one for types and a table for values

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;
}

i created a variable for each cards 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]));

and i make them draggable and droppable

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

But about my droppable div i really don't know how to make my condition to only accept a one of each 13 div

Upvotes: 1

Related Questions