drag and drop : problème de plan !

**kayser** · 30/03/2005, 16h57

bonjour,

j'ai un code asp + javasript qui me permet de déplacer les cellules d'une table.

Lorsque je déplace une cellule vers une autre, je veux récupérer l'information de la deuxième cellule (cellule d'arrivé). Ceci fonctionne si je prend la première cellule du tableau vers la deuxième (ou toisième).
Mais si je déplace la troisième vers la deuxième (ou première) j'ai le nom de la troisième cellule à chaque fois ! J'ai remarqué qu'en fait je récupère le nom de la cellule qui est au premier plan !

Comment faire pour récupérer le nom de la cellule d'arrivé quelques soit sa position dans le pan ?

voici le code :

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
 
<html>
<head>
<style>
<!--
.drag{position:relative;cursor:move}
-->
</style>
<script language="javascript">
	var dragapproved=false
	var z,x,y
 
	function move(){
		if (event.button==1&&dragapproved){
			z.style.pixelLeft=temp1+event.clientX-x
			z.style.pixelTop=temp2+event.clientY-y
			return false
		}
	}
 
	function drags(){
		if (!document.all)
			return
		if (event.srcElement.className=="drag"){
			dragapproved=true
			z=event.srcElement
			temp1=z.style.pixelLeft
			temp2=z.style.pixelTop
			x=event.clientX
			y=event.clientY
			document.onmousemove=move
		}
	}
 
	function drops(){
		if (!document.all)
			return
		if (event.srcElement.className=="drag"){
			dragapproved=false
			alert(event.srcElement.id)
		}
	}
 
	document.onmousedown=drags
	document.onmouseup=drops
</script>
</head>
<%
%>
<body>
	<table class="drag">
		<tr>
			<td class="drag" bgcolor="#FF0000" height="50" width="50" id="td11">bonjour</td>
			<td class="drag" bgcolor="#00FF00" height="50" width="50" id="td12">salut</td>
			<td class="drag" bgcolor="#0000FF" height="50" width="50" id="td13">à demain</td>
		</tr>
	</table>
</body>
</html>

Merci d'avance.

**Matthieu2000** · 30/03/2005, 17h25

dans la fonction drags mets le event.srcElement.id dans une variable!

**SpaceFrog** · 30/03/2005, 17h33

c'etait toi sur l'autre forum ???
je l'ai modifié l'autre jour celuilà ...

**kayser** · 31/03/2005, 09h20

matthieu2000> si je fais ça, ca me donne l'id de l'element de départ et non celui d'arrivé... mais ton idée m'a donné une autre idée... je te tiens au courant

SpaceFrog> Oui j'ai posté ds le forum asp mais on m'a di de le mettre ici donc j'ai délesté l'autre ! Par contre je sais pas ce que tu as mis... si tu pouvais reposter ici ! merci

**SpaceFrog** · 31/03/2005, 09h23

non pas sur developpez... sur un autre forum de langue anglaise ...
je dois avoir le code chez moi ... c'est le même script que j'ai modifié ...
je recherche ...

c'est là !!! le monde est petit non ?

**kayser** · 31/03/2005, 10h03

Spacefrog> ah non c t pas moi ! bon moi et l'anglais on s'entend pas tres bien mais je vais regardé ton code de près ! merci !

**kayser** · 31/03/2005, 10h27

SpaceFrog> j'ai modifié deux, trois choses grâce à ton code et maintenant ça fonctionne !!

merci à tous !

voici monde code final

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
 
<html>
<head>
<style>
<!--
.drag{position:relative;cursor:move;z-index:100;}
.draggable{position:relative;cursor:move;z-index:0;}
-->
</style>
<script language="javascript">
	var dragapproved=false
	var z,x,y
	var idElement
 
	function move(){
		if (event.button==1&&dragapproved){
			z.style.pixelLeft=temp1+event.clientX-x
			z.style.pixelTop=temp2+event.clientY-y
			return false
		}
	}
 
	function drags(){
		if (!document.all)
			return
		if (event.srcElement.className=="drag"){
			dragapproved=true
			z=event.srcElement
			z.className = "draggable"
			temp1=z.style.pixelLeft
			temp2=z.style.pixelTop
			x=event.clientX
			y=event.clientY
			idElement = event.srcElement.id
			document.onmousemove=move
		}
	}
 
	function drops(){
		if (!document.all)
			return
		if (event.srcElement.className=="drag"){
			dragapproved=false
			z.className="draggable"
			alert(idElement)
			alert("srcElement : " + event.srcElement.id)
		}
	}
 
 
	document.onmousedown=drags
	document.onmouseup=drops
</script>
</head>
<%
%>
<body>
	<table class="drag">
		<tr>
			<td class="drag" bgcolor="#FF0000" height="50" width="50" id="td11">bonjour</td>
			<td class="drag" bgcolor="#00FF00" height="50" width="50" id="td12">salut</td>
			<td class="drag" bgcolor="#0000FF" height="50" width="50" id="td13">à demain</td>
		</tr>
	</table>
</body>
</html>

**SpaceFrog** · 31/03/2005, 10h33

heu pas au point ton code ... il ne déplace pas le bon élément ...

**kayser** · 31/03/2005, 12h16

en effet, j'ai remarqué que lorsque je fais plusieurs déplacements, il y a qq bug... mais moi ça ne me gène pas car y a que le premier déplacement qui compte car ensuite ma page est recalculé !

**SpaceFrog** · 31/03/2005, 13h54

c'est juste une question de drag approved et d'assignation de l'objet en déplacement ...

drag and drop : problème de plan !

JavaScript

Discussions similaires

Partager

Partager