Drag Drop image

Version imprimable

Drag Drop image

Bonsoir,
je voudrais effectuer un dragdrop pr deplacer des objets :
le souci est que ces objets crées ne bougent pas : voici mon code :
fichier html :

Code:

1
2
3
4
5
<img id="salle" src = "salle.jpg" alt = "salle">;
<img id="micro" src = "mic.jpg" alt = "micro">;
<img id="table" src = "table.jpg" alt = "table">;
 
<div id="micro"  onmousedown="beginDrag(this,event);" onmousemove="drag(event);" onmouseup="endDrag();"></div>

//idem pour table

Fichier JS:

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
function beginDrag(p_obj,e){
	isDragging = true;
	objectToDrag = p_obj;
	getPositionCurseur(e);
	ecartX = curX - parseInt(objectToDrag.style.left);
	ecartY = curY - parseInt(objectToDrag.style.top);
}
function getPositionCurseur(e){
	//ie
	if(document.all){
		curX = event.clientX;
		curY = event.clientY;
	}
 
	//mozilla
	if(document.getElementById){
		curX = e.clientX;
		curY = e.clientY;
	}
}
function drag(e){
	var newPosX;
	var newPosY;
	if(isDragging == true){
 
		getPositionCurseur(e);
		newPosX = curX - ecartX;
		newPosY = curY - ecartY;
 
		objectToDrag.style.left = newPosX; //+ 'px';
		objectToDrag.style.top = newPosY; //+ 'px';
}
function endDrag(){
	isDragging = false;
}

Fichier css:

Code:

1
2
3
4
#micro, #salle, #table{
	position: absolute;
	cursor: move;
}

Je ne comprends vraiment pas d'où vient le pb, merci de votre aide !!

04/12/2006, 00h58
kapfab

voila la réponse, j'ai 2 id pr un meme objet

Code:

<img id="table" src = "table.jpg" alt = "table" onmousedown="beginDrag(this,event);" onmousemove="drag(event);" onmouseup="endDrag();">

Par contre, comment gère-t'on le fait qu'une image se place audessus d' une autre? Car dans mon cas, lors du placement du micro, il se retrouve en dessous de l'objet bureau :( . Merci de votre aide

Il faut que tu attribue à l'objet que tu es en train de dragger un z-index supérieur aux autres.
Code:

1 2 3 4 5 6 7 8 9 function beginDrag(p_obj,e){ isDragging = true; objectToDrag = p_obj; getPositionCurseur(e); ecartX = curX - parseInt(objectToDrag.style.left); ecartY = curY - parseInt(objectToDrag.style.top); objectToDrag.style.zIndex = 100; }
n'oublie pas de le remettre a 0 ou 1 a la fin du drag

Si je peut également me permettre de te donner un conseil pour optimiser ton drag & drop, il faut gérer celui ci plutot de maniere temporelle.
Tu as déja du remarquer que dans cet exemple, si tu bouge la souris très vite, ton objet va faire nimporte koi. C'est parceque tu lui donne une action à faire à la fois.
Je te conseille d'utiliser ceci :
Code:

1 2 3 4 5 6 7 8 9 10 function beginDrag(p_obj,e){ isDragging = true; objectToDrag = p_obj; getPositionCurseur(e); ecartX = curX - parseInt(objectToDrag.style.left); ecartY = curY - parseInt(objectToDrag.style.top); objectToDrag.style.zIndex = 100; document.onmousemove = drag; document.onmouseup = endDrag;
De cette manière, lors du début du drag (c a d onmousedown) ET que tu bouge la souris cela déclenchera l'action en question.
Tu verras ca marche bcp mieux.
Bye

04/12/2006, 23h13
kapfab

Merci walidnat pour le z index et le précieux supplément à mon drag drop !!!
:D youpi
06/12/2006, 00h07
WalidNat

de rien
c'est toujours un plaisir