Bonjour à tous et à toutes,

tout d'abord, désolé pour l’orthographe déplorable x)

je suis en train de développer une application qui utilise le drag & drop. Tout allait bien jusqu’à ce que je teste la compatibilité de mon appli sur d'autres navigateurs ....

Sous firefox aucun soucis mais sous chrome, le droppable ne fonctionne plus. Aurez vous une idée d’où pourrait venir le problème ?

Voici quelques bouts de mon code qui pourrait vous aidé à identifier le soucis.

Les puces "droppable" (ci-dessous) sont placé grâce aux attributs css top et left.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="terrain">
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" /> 
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />   
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />             
   <img style="cursor:pointer;position:relative;" class="droppable" src="./img/puce_place.png" />             
</div>
Voici le code JS de mes éléments draggable.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( ".draggablePlayers" ).draggable({ 
        revert: function(droppableObj){
            console.log(droppableObj); // Affiche fale sous chrome quand je déplace sur mon objet droppable ?!
            if(droppableObj == false)
                return true;
 
            // Traitement 
 
            return false;
        },
 
        snapTolerance : 100,
        helper : "clone"
});
Le console log m'affiche un false même quand je deplace mon objet draggable sur ma zone droppable.

J'ai testé sous firefox, IE9 et Chrome et seul chrome ne fonctionne pas :/

Merci d'avance