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.

[rams33]

Oui je sais qu'elle sont les unes sur les autres , as tu une solution pour éviter quelle soient l’une sur l'autre ? Tu penses que le soucis peut venir de ça ? car ce que je comprend pas ces que tout fonctionne sur la map sauf sur l'id 00 et 01 ,10 et 11 etc.

[Golgotha]

Non, ça ne marche pas, test en positionnant ton bonhomme sur les extremité de tes tuiles et tu verra que ça par en cou*lle.

pour moi ça va passer par des maths en javascript

Code :

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

function get_tuile(pos_x, pos_y){... return id}

la fonction prends les coordonnées x/y de ta souris et te donne l'id de ta tuile en fonction des coordonnées géographique.

Une autre approche serais de faire ta grille avec des div transformé grâce au css :

Code :

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

-webkit-transform: skew(50deg);

[rams33]

Ok pourquoi pas , je vois pour recup la position de la souris mais comment faire pour relier une position a un id ?

[Golgotha]

J'ai essayé la deuxième solution que je vous propose, avec une transformation des div avec le css.

(testé sous chrome)

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
 
<head>
 
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
$(function(){
 
        $( "#garnison_images" ).draggable();
        $( ".tuille" ).droppable({
            drop: function( event, ui ) {
                $("#place").html("je suis sur : " + $(this).attr('id')); 
            },
            over: function(event, ui) { $(this).css('background-color','red'); },
            out: function(event, ui) { $(this).css('background-color','green'); }
        });
 
});
 
</script>
 
</head>
 
<style type="text/css">
 
.tiles td{
 
	border: 1px solid;
	width: 50px;
	height: 50px;
	background-color: green;
	z-index: 1;
 
}
 
.content {
 
	width: 200px;
	height: 200px;
	position: relative;
	top: 50px;
	left: 100px;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: perspective(800) rotateX(60deg) rotateZ(45deg);
 
}
 
#garnison_images{
 
 
	width: 16px;
	height: 16px;
 
 
}
​
 
</style>
 
<body>
 
	<div id="place" align=center></div>
 
<div class="content">
<table class="tiles">
	<tr>
		<td id="coord_01" class="tuille">
		<td id="coord_02" class="tuille">
		<td id="coord_03" class="tuille">
		<td id="coord_04" class="tuille">
	</tr>
	<tr>
		<td id="coord_05" class="tuille">
		<td id="coord_06" class="tuille">
		<td id="coord_07" class="tuille">
		<td id="coord_08" class="tuille">
	</tr>
	<tr>
		<td id="coord_09" class="tuille">
		<td id="coord_10" class="tuille">
		<td id="coord_11" class="tuille">
		<td id="coord_12" class="tuille">
	</tr>
	<tr>
		<td id="coord_13" class="tuille">
		<td id="coord_14" class="tuille">
		<td id="coord_15" class="tuille">
		<td id="coord_16" class="tuille">
	</tr>
	<tr>
		<td id="coord_17" class="tuille">
		<td id="coord_18" class="tuille">
		<td id="coord_19" class="tuille">
		<td id="coord_20" class="tuille">
	</tr>
</table>
</div>
 
<div id="garnison_images" >
<img class="pp3diso-avatar" src="http://kiakstore.com/store/themes/prestashop_new/img/icon/disabled.gif">
 
</div>
 
</body>
 
 
</html>

Attention a ne pas mettre l'image Draggable en posistion fixe ou relative, ça pose des problèmes pour jQuery ui j'ai l'impression.

Sinon cet exemple est une première approche par transformation, ce n'est pas encore parfait, mais ça donne une idée de ce qu'on peux faire.

J'essayerais de faire un exemple avec la première solution (calcule des coordonnées en javascript)

[rams33]

Bonjour.
Vraiment intéressant comme réponse par contre pas moyen que ça marche sur ie ?

Ok j’attends cette exemple de la 1er solution en tout cas merci ces très enrichissant tout ça