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