Discussion :

[dagda01]

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

[danielhagnoul]

Bonsoir

Vous devez bien comprendre qu'il est impossible de tester quoi que ce soit avec deux bouts de code ! Dans votre cas, présence d'images, le plus simple est de fournir un lien vers une page de test.

[dagda01]

Bonjour,

problème résolu. La zone de mon droppable était tout simplement plus petite que mon objet draggable et apparemment cela foirait sous chrome.

J'ai donc utiliser la propriété "Tolerance" avec comme valeur "pointer" pour que ca résolve le soucis