Insérer plusieurs div dans une zone droppable [Résolu]

Messages postés
4
Date d'inscription
mercredi 12 décembre 2012
Statut
Membre
Dernière intervention
13 avril 2014
- - Dernière réponse : backman
Messages postés
4
Date d'inscription
mercredi 12 décembre 2012
Statut
Membre
Dernière intervention
13 avril 2014
- 13 avril 2014 à 21:11
Bonjour,
actuellement j'utilise jquery ui et ses fonctions drag and drop. Je peux donc facilement déplacer mes div "carte" et les dropper dans des div droppable . Le problème c'est que conformément aux règles du jeu de solitaire j'ai essayé de faire en sorte de ne pouvoir dropper que des cartes de valeurs différentes mais de même type dans la même div,mais sans succès.

Voilà une parti de mon code

Mon code html

<div class="table">
<div class="droppable" id="pioche"></div>
<div class="droppable" id="main"></div>
<div class="droppable" id="high_frame1"></div>
<div class="droppable" id="high_frame2"></div>
<div class="droppable" id="high_frame3"></div>
<div class="droppable"id="high_frame4"></div>
<div id="asdecoeur" class="carte" ></div>
<div id="asdetreffle" class="carte"></div>
<div id="asdecarr" class="carte" ></div>
<div id="asdepique" class="carte" ></div>
<div id="roidepique" class="carte" ></div>
</table>

Mon code Javascript

var TYPE = {
PIQUES: 1,
COEURS: 2,
TREFLES: 3,
CARREAUX: 4
};
var VALUES = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'V', 'D', 'R'];
function Card(type , val)
{
this.type = type;
this.val = val;
}

var deck = [
new Card(TYPE.PIQUES, VALUES[0]),
new Card(TYPE.PIQUES, VALUES[1]),
new Card(TYPE.PIQUES, VALUES[2]),
new Card(TYPE.PIQUES, VALUES[3]),
new Card(TYPE.PIQUES, VALUES[4]),
new Card(TYPE.PIQUES, VALUES[5]),
new Card(TYPE.PIQUES, VALUES[6]),
new Card(TYPE.PIQUES, VALUES[7]),
new Card(TYPE.PIQUES, VALUES[8]),
new Card(TYPE.PIQUES, VALUES[9]),
new Card(TYPE.PIQUES, VALUES[10]),
new Card(TYPE.PIQUES, VALUES[11]),
new Card(TYPE.PIQUES, VALUES[12]),
new Card(TYPE.COEURS, VALUES[0]),
new Card(TYPE.COEURS, VALUES[1]),
new Card(TYPE.COEURS, VALUES[2]),
new Card(TYPE.COEURS, VALUES[3]),
new Card(TYPE.COEURS, VALUES[4]),
new Card(TYPE.COEURS, VALUES[5]),
new Card(TYPE.COEURS, VALUES[6]),
new Card(TYPE.COEURS, VALUES[7]),
new Card(TYPE.COEURS, VALUES[8]),
new Card(TYPE.COEURS, VALUES[9]),
new Card(TYPE.COEURS, VALUES[10]),
new Card(TYPE.COEURS, VALUES[11]),
new Card(TYPE.COEURS, VALUES[12]),
....................................
new Card(TYPE.CARREAUX, VALUES[12]),
];

$AsDePique = $('#asdepique').data('card', new Card(TYPE.PIQUES, VALUES[0]));
$DeuxDePique = $('#deuxdepique').data('card',new Card(TYPE.PIQUES, VALUES[1]));
$TroisDePique = $('#troisdepique').data('card',new Card(TYPE.PIQUES, VALUES[2]));
$QuatreDePique = $('#quatredepique').data('card',new Card(TYPE.PIQUES, VALUES[3]));
$CinqDePique = $('#cinqdepique').data('card',new Card(TYPE.PIQUES, VALUES[4]));
$SixDePique = $('#sixdepique').data('card',new Card(TYPE.PIQUES, VALUES[5]));
$SeptDePique = $('#septdepique').data('card', new Card(TYPE.PIQUES, VALUES[6]));
$HuitDePique = $('#huitdepique').data('card',new Card(TYPE.PIQUES, VALUES[7]));
$NeufDePique = $('#neufdepique').data('card',new Card(TYPE.PIQUES, VALUES[8]));
$DixDePique = $('#dixdepique').data('card',new Card(TYPE.PIQUES, VALUES[9]));
$ValletDePique = $('#valletdepique').data('card',new Card(TYPE.PIQUES, VALUES[10]));
$DameDePique = $('#damedepique').data('card',new Card(TYPE.PIQUES, VALUES[11]));
$RoiDePique = $('#roidepique').data('card', new Card(TYPE.PIQUES, VALUES[12]));
$AsDeCoeur = $('#asdecoeur').data('card',new Card(TYPE.COEURS, VALUES[0]));

$('.carte').draggable({revert : 'invalid', snap : true , snapMode :'inner',snapTolerance : 50});
$('.droppable').droppable();
$('#high_frame1').droppable({
accept :function(d) {
for(var i=0;i<52;i++)
{
$('#high_frame1').data('pio',deck[i]);
if(d.data('card') == deck[i])
{return true;}
}

Il m'a été conseillé de mettre des conditions plutôt dans l'option accept de la fonction droppable et celle que j'ai mise pour le "high_frame1" semblait assez logique mais rien n'y fait. si quelqu'un peut m'aider à resoudre ce problème ce serait sympa.
Merci d'avance.
Afficher la suite 

1 réponse

Messages postés
1700
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 juin 2019
39
0
Merci
il doit y avoir un teste qui passe par une condition qui est si le type de la carte dropé est le meme type de la carte se trouvant dans le div on autorise le drop
backman
Messages postés
4
Date d'inscription
mercredi 12 décembre 2012
Statut
Membre
Dernière intervention
13 avril 2014
-
oui, j'y ai pensé , c'est pourquoi j'ai essayé d'utiliser des boucles infinis comme le for ou le while et le do while au niveau de l'option accept de la div droppable. Le problème c'est qu'à chaque fois que je le fait ça fait ramer mon navigateur et je ne peux plus effectuer de test. Je pense donc qu'il va falloir passer par les objets mais c'est assez compliqué pour un débutant :S
Commenter la réponse de @karamel