Discussion :

[rams33]

Bonsoir a tous je donne le code et vous explique le problème après.
Le html du code donne ça .

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="00" class="tuille ui-droppable" style="left:0px; top:0px;"></div>
<div id="01" class="tuille ui-droppable" style="left:45.5px; top:23px;"></div>
<div id="02" class="tuille ui-droppable" style="left:91px; top:46px;"></div>
<div id="03" class="tuille ui-droppable" style="left:136.5px; top:69px;"></div>
<div id="04" class="tuille ui-droppable" style="left:182px; top:92px;"></div>
<div id="05" class="tuille ui-droppable" style="left:227.5px; top:115px;"></div>
<div id="06" class="tuille ui-droppable" style="left:273px; top:138px;"></div>
<div id="07" class="tuille ui-droppable" style="left:318.5px; top:161px;"></div>
<div id="08" class="tuille ui-droppable" style="left:364px; top:184px;"></div>

Le soucis c'est que quand je drop sur l'id 00 sa me renvoie bien 00, et si je drop sur l'id 01 eh bien ca me renvoie 00 , puis si je drop sur l'id 02 ça me renvoie 01 et ainsi entraine un décalage tout le temps

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    $( ".tuille" ).droppable({
 
			drop: function( event, ui ) {
                            var id =($(this).attr('id'));
                            alert(id); 
                            var left =parseInt($(this).css('left'))+55;
                            var top = parseInt($(this).css('top'))+5;
                                ui.draggable.appendTo( "#pp3diso-clicks" )  
 
                                .css({                             
                                        left: left,
                                        top:top
 
 
                                    })
 
 
			}
             });

Voila je comprend pas d'ou viens ce décalage merci de votre aide

[SpaceFrog]

avant html5 un id ne doit jamais être uniquement numérique ni commencer par du numérique ...

=> id="_00"

[rams33]

Merci de ta réponse mais malheureusement ça ne change rien au bug.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="coord_00" class="tuille ui-droppable" style="left:0px; top:0px;"></div>
<div id="coord_01" class="tuille ui-droppable" style="left:45.5px; top:23px;"></div>
<div id="coord_02" class="tuille ui-droppable" style="left:91px; top:46px;"></div>
<div id="coord_03" class="tuille ui-droppable" style="left:136.5px; top:69px;"></div>
<div id="coord_04" class="tuille ui-droppable" style="left:182px; top:92px;"></div>
<div id="coord_05" class="tuille ui-droppable" style="left:227.5px; top:115px;"></div>
<div id="coord_06" class="tuille ui-droppable" style="left:273px; top:138px;"></div>
<div id="coord_07" class="tuille ui-droppable" style="left:318.5px; top:161px;"></div>
<div id="coord_08" class="tuille ui-droppable" style="left:364px; top:184px;"></div>

As tu une idée pourquoi j'ai ce décalage pour recup l'id ?

[rams33]

Voila ci un lien sur js bin pour visualiter le probleme il faut déplacer le smiley sur la carte
http://jsbin.com/iroguz/2/edit

[NoSmoking]

Bonjour,
tu as visiblement un problème lié à la superposition de tes éléments tuille, ajoutes au style un border:1px solid gray; pour voir que cela peu poser problème.

[rams33]

Merci de ta réponse ba cela affiche les bordures des tuilles .
Mais ce qui est étrange c'est que tout fonctionne sur la map juste les id 00 01 10 11 etc , qui font ce décalage.

[Golgotha]

Les images en 2D isométrique ne représente plus la div physique.

Comme tu peux le voir sur l'image, les div sont les unes sur les autres, et tout est basé sur les divs.