Sujet Précédent Sujet Suivant

Insérer plusieurs div dans une zone droppable

Résolu
backman Messages postés 4 Date d'inscription mercredi 12 décembre 2012 Statut Membre Dernière intervention 13 avril 2014 - 12 avril 2014 à 13:32
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.

1 réponse

Réponse 1 / 1
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146
13 avril 2014 à 08:45
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
0
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
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
0
Rejoignez-nous