Drag and drop ?

Invité · 11/06/2007, 15h02

Bonjour !

Je recherche à faire quelque chose qui à la base me paraissait tout simple mais en fait, j'ai rien trouvé de concluant...

J'aimerais dans mon site, que quand la personne se connecte en administrateur, une boîte s'affiche avec des outils dedans. Faire apparaître la boite, se n'est pas un problème. Le problème c'est que j'aimerais qu'on puisse la déplacer (drag'n'drop).

Il y a pleins d'articles mais aucun n'explique simplement comment seulement bouger une boite...

**Auteur** · 11/06/2007, 17h11

bonjour,

Javatwister a fait un script de drag & drop

Invité · 11/06/2007, 17h31

Le truc c'est que c'est un script de drag n drop pour liste interchangeable et qu'il y a pleins de code qui me servira a rien ( je veux juste déplacer un div...). J'aimerais que le code soit le moins charger possible.

J'ai trouvé qqch mais j'arrive pas à l'intégrer à ma page...

Le voilà (trouvé sur le forum) :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<style type="text/css">
	body
	{
		background-color:#000000;
		color:#000000;
	}
	.menu_admin {
	top:100px;
	left:100px;
	background-color:#FFFFFF;
	position:absolute;
	width:200;
	height:200;
	cursor:move;
	}
</style>
</html>
<body>
<script language="JavaScript1.2">
<!--
 
var ie=document.all;
var nn6=document.getElementById&&!document.all;
 
var isdrag=false;
var x,y;
var dobj;
 
function movemouse(e)
{
 
  if (isdrag)
  {
 	var X = tx - x;
 	var Y = ty - y;
//alert(X+' '+Y);
	dobj.style.left = nn6 ? e.clientX + X : event.clientX + X;
	dobj.style.top  = nn6 ? e.clientY + Y : event.clientY + Y;
 
	return false;
  }
 
}
 
function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
 
  while (fobj.tagName != topelement && fobj.className != "menu_admin")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }
 
  if (fobj.className=="menu_admin")
  {
    isdrag = true;
 
	// objet à déplacer
    dobj = fobj;
	// espacement gauche de l'objet
    tx = parseInt(dobj.style.left+0);
	// espacement droit de l'objet
    ty = parseInt(dobj.style.top+0);
	// position x de la souris
    x = nn6 ? e.clientX : event.clientX;
	// position y de la souris
    y = nn6 ? e.clientY : event.clientY;
 
    document.onmousemove=movemouse;
 
    return false;
  }
}
 
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
 
//-->
</script>
<div class="menu_admin" id="transp">
Ceci est un essai<br/><br/></div>
 
</body>
</html>

**Djakisback** · 11/06/2007, 17h59

Salut,
voilà un exemple réduit au minimum :

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
function getMouseCoords(evnt){
	if(window.event)	{
		evnt = window.event;
	}
	// Gecko
	if(evnt.pageX || evnt.pageY)	{
		return {x:evnt.pageX, y:evnt.pageY};
	}
	// IE
	else if(evnt.clientX || evnt.clientY)	{
		return {x:evnt.clientX + document.body.scrollLeft - document.body.clientLeft, y:evnt.clientY + document.body.scrollTop - document.body.clientTop};
	}
}
 
function Box()	{
	this.isDraggable = false;
 
	// Composants graphiques
	this.mainPanel = document.createElement('div');
	this.mainPanel.style.position = 'absolute';
	this.mainPanel.style.backgroundColor = '#ECE9D8';
	this.message = document.createElement('p');
	this.mainPanel.style.width = 300;
 
	this.mainPanel.onmousedown = function(evnt)	{
		var mousePos = getMouseCoords(evnt);
		window.box.isDraggable = true;
		window.box.mainPanel.xOffset = mousePos.x - window.box.mainPanel.offsetLeft;
		window.box.mainPanel.yOffset = mousePos.y - window.box.mainPanel.offsetTop;
	}
 
	document.onmouseup = function()	{
		if(window.box != null)	{
			window.box.isDraggable = false;
		}
	}
 
	document.onmousemove = function(evnt)	{
		if(window.box != null && window.box.isDraggable == true)	{
			var mousePos = getMouseCoords(evnt);
			window.box.mainPanel.style.left = mousePos.x - window.box.mainPanel.xOffset;
			window.box.mainPanel.style.top = mousePos.y - window.box.mainPanel.yOffset;
		}
	}
 
	// Message
	this.message.innerHTML = "message";
 
	this.mainPanel.appendChild(this.message);
	document.body.appendChild(this.mainPanel);
}
 
 
window.box = new Box();

Si tu ne veux pas que le div bouge quand on clique un élément enfant je te conseille d'ajouter un div de titre et de modifier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.mainPanel.onmousedown = etc

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.titlePanel.onmousedown = etc

Bye

(précision : j'ai codé ce truc pour simuler des fenêtres d'alert et est donc destiné à la base à créer un seul élément draggable et à le détruire. Pour gérer plusieurs éléments la méthode est un peu différente)

**scougirou** · 11/06/2007, 18h40

Ou tu peux utiliser des librairies déjà toutes prêtes.
Perso j'utilise scriptaculous, mais dojo doit aussi avoir du drag'n drop.
Ca évite de se compliquer la vie avec du code supplémentaire, et en général les effets visuels en plus sont plutôt pas mal.
L'inconvénient c'est que tu alourdis un peu ton site.
une petite démo :
http://demo.script.aculo.us/shop

**Djakisback** · 11/06/2007, 21h37

Un autre code plus générique très fortement inspiré d'ici :

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
<div id="d" style="position:absolute; background-color:#ECE9D8; width:300px; height:200px;"><p>rrrr</p><input type="button"><input type="text"></div>
 
<script>
 
window.enableDragNDrop = function()	{
	this.draggableObject = null;
	this.mouseOffset = null;
 
	this.getMouseCoords = function(evnt){
		if(this.event)	{
			evnt = this.event;
		}
		// Gecko
		if(evnt.pageX || evnt.pageY)	{
			return {x:evnt.pageX, y:evnt.pageY};
		}
		// IE
		else if(evnt.clientX || evnt.clientY)	{
			return {x:evnt.clientX + this.document.body.scrollLeft - this.document.body.clientLeft,
			 y:evnt.clientY + this.document.body.scrollTop - this.document.body.clientTop};
		}
	}
 
	// Callbacks
	this.document.onmouseup = function()	{
		window.draggableObject = null;
	}
	this.document.onmousemove = function(evnt)	{
		if(draggableObject != null)	{
			var mousePos = window.getMouseCoords(evnt);
			window.draggableObject.style.left = mousePos.x - window.mouseOffset.x;
			window.draggableObject.style.top = mousePos.y - window.mouseOffset.y;
		}
	}
}
 
window.makeDraggable = function(object)	{
	object.onmousedown = function(evnt){
		mouseCoords = window.getMouseCoords(evnt);
		window.draggableObject = this;
		window.mouseOffset =  {x:mouseCoords.x - this.offsetLeft, y:mouseCoords.y - this.offsetTop};
	}
}
 
window.enableDragNDrop();
window.makeDraggable(document.getElementById('d'));
 
 
</script>

L'avantage du premier code c'est de pouvoir dragger tout un ensemble d'éléments mais seulement depuis un sous-élément. (Comme pour une fenêtre d'alerte, seule la barre de titre permet de bouger la fenêtre)

Tu peux pallier à cela en utilisant une autre fonction (ca doit être faisable plus proprement avec bind()) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
window.makeDraggableFrom = function(object1, object2)	{
	object2.draggableTarget = object1;
	object2.onmousedown = function(evnt){
		mouseCoords = window.getMouseCoords(evnt);
		window.draggableObject = this.draggableTarget;
		window.mouseOffset =  {x:mouseCoords.x - this.draggableTarget.offsetLeft, y:mouseCoords.y - this.draggableTarget.offsetTop};
	}
}

Invité · 14/06/2007, 15h23

Voilà la solution que j'ai trouvée et qui fonctionne à merveille !!

Le code javascript :

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
67
68
69
70
71
72
73
74
75
76
77
78
 
<script type="text/javascript">
 
	var myObjectClick = null;
	var movable = false;
	var positionXAtClick = null;
	var positionYAtClick = null;
	var positionXMyobjectClick = null;
	var positionYMyobjectClick = null;
	var atop = null;
	var aleft = null;
 
 	function init_evenement()
	{
		if(window.attachEvent)
		{
			document.onmousedown = start;
			document.onmousemove = drag;
			document.onmouseup = drop;
		}
		else
		{
			document.addEventListener("mousedown",start, false);
			document.addEventListener("mousemove",drag, false);
			document.addEventListener("mouseup",drop, false);
		}
	}
 
	function start(e)
	{
		if(!e)
		{
			e = window.event;
		}
		myObjectClick = (e.target)? e.target:e.srcElement;
		if(myObjectClick)
		{
			movable = true;
			if(myObjectClick)
			{
				positionXAtClick = e.clientX;
				positionYAtClick = e.clientY;
				positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
				positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
				return false;
			}
		}
	}
 
	function drag(e)
	{
		if(!e)
		{
			e = window.event;
		}
 
		if(movable && myObjectClick)
		{
			myObjectClick.style.position = "absolute" ;
			myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
			myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
			return false;
		}
	}
 
	function drop()
	{
		myObjectClick = null;
		atop = null;
		movable = false;
		positionXAtClick = null;
		positionYAtClick = null;
		positionXMyobjectClick = null;
		positionYMyobjectClick = null;
	}
 
	window.onload = init_evenement;
</script>

Un ptit CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.boiteBleu
{
	background-color:#C1D8E8;
	width:100px;
	height:100px;
	z-index:99;
}
.drag
{
	border:1px black solid;
	cursor:move;
}

Et un mini bout de html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div class='boiteBleu drag' style='position: absolute; margin-top: 0px; margin-left: 10px;'>
				bonjour
				<br/>
				Ca va ?
			</div>

Invité · 14/06/2007, 15h40

Par contre je viens de me rendre compte que si je mets du texte entre balise (lien, souligné,...) il devient draguable aussi...... Quelqu'un pourrait m'expliquer pourquoi ? J'en pige pas une en javascript....

**Auteur** · 14/06/2007, 18h01

Envoyé par babastutz

Par contre je viens de me rendre compte que si je mets du texte entre balise (lien, souligné,...) il devient draguable aussi...... Quelqu'un pourrait m'expliquer pourquoi ? J'en pige pas une en javascript....

Tout simplement parce qu'un événément qui se produit sur un noeud parent se "propage" sur les noeuds enfants.

Un exemple simple :

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function out1() {document.getElementById("idDiv").innerHTML += " (div 1 out)";}
 
function over1() {document.getElementById("idDiv").innerHTML += " (div 1 over)";}
 
 
//-->
</script>
 
</head>
 
<body>
<div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="over1()" onmouseout="out1()">
div 1
<div style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;">
div 2
<div style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;">
div 3
</div>
</div>
</div>
 
<div id="idDiv"></div>
 
</body>
 
</html>

Regarde ce qu'il se passe lorsque tu survoles successivement les div 1, 2 et 3

**Djakisback** · 14/06/2007, 18h13

C'est pour ca que je te disais de faire une barre de titre ou un bouton de déplacement ^^

evnt.clientX fonctionne sous FF ?

Invité · 15/06/2007, 09h24

Qu'est-ce que tu entends par :

Envoyé par Djakisback

C'est pour ca que je te disais de faire une barre de titre ou un bouton de déplacement ^^

**Djakisback** · 15/06/2007, 16h03

Il s'agit de rendre un élément draggable mais de gérer les événements sur un autre. Voilà un exemple complet avec la méthode utilisée au-dessus, seul la barre de titre permet de bouger le div :

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
<div id="d" style="position:absolute; background-color:#ECE9D8; width:300px; height:200px;">
<div id="t" style="position:absolute; background-color:#CCCCCC; width:300px; height:20px;">Outils</div>
<p>text</p>
<input type="button">
<input type="text"></div>
 
<script>
 
window.enableDragNDrop = function()	{
	this.draggableObject = null;
	this.mouseOffset = null;
 
	this.getMouseCoords = function(evnt){
		if(this.event)	{
			evnt = this.event;
		}
		// Gecko
		if(evnt.pageX || evnt.pageY)	{
			return {x:evnt.pageX, y:evnt.pageY};
		}
		// IE
		else if(evnt.clientX || evnt.clientY)	{
			return {x:evnt.clientX + this.document.body.scrollLeft - this.document.body.clientLeft,
			 y:evnt.clientY + this.document.body.scrollTop - this.document.body.clientTop};
		}
	}
 
	// Callbacks
	this.document.onmouseup = function()	{
		window.draggableObject = null;
	}
	this.document.onmousemove = function(evnt)	{
		if(draggableObject != null)	{
			var mousePos = window.getMouseCoords(evnt);
			window.draggableObject.style.left = mousePos.x - window.mouseOffset.x;
			window.draggableObject.style.top = mousePos.y - window.mouseOffset.y;
		}
	}
}
 
window.makeDraggableFrom = function(object1, object2)	{
	object2.draggableTarget = object1;
	object2.onmousedown = function(evnt){
		mouseCoords = window.getMouseCoords(evnt);
		window.draggableObject = this.draggableTarget;
		window.mouseOffset =  {x:mouseCoords.x - this.draggableTarget.offsetLeft, y:mouseCoords.y - this.draggableTarget.offsetTop};
	}
}
 
window.enableDragNDrop();
window.makeDraggableFrom(document.getElementById('d'), document.getElementById('t'));