Discussion :

[kapfab]

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 HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

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
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 CSS :

S�lectionner tout - Visualiser dans une fen�tre � part

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 !!

[kapfab]

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<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

[WalidNat]

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[kapfab]

Merci walidnat pour le z index et le pr�cieux suppl�ment � mon drag drop !!!
youpi

[WalidNat]

de rien
c'est toujours un plaisir