Récupération de valeur jquery

Version imprimable

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

Code:

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:

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

06/08/2012, 09h25
SpaceFrog

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

=> id="_00"

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

Code:

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 ?

06/08/2012, 14h25
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
06/08/2012, 16h50
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.
06/08/2012, 17h07
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.
06/08/2012, 17h24
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.

http://img15.hostingpics.net/thumbs/...28640tuile.png
06/08/2012, 17h36
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.
06/08/2012, 17h45
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:

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:

-webkit-transform: skew(50deg);
06/08/2012, 18h19
rams33

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

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

(testé sous chrome)

Code:

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)

08/08/2012, 14h12
rams33

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

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