Drag and drop ?

Version imprimable

11/06/2007, 14h02
Invité

Drag and drop ?

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...
11/06/2007, 16h11
Auteur

bonjour,

Javatwister a fait un script de drag & drop

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:

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>

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

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

this.mainPanel.onmousedown = etc

par :

Code:

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)

11/06/2007, 17h40
scougirou

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

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

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

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};
	}
}

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

Le code javascript :

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

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:

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

14/06/2007, 14h40
Invité

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....:aie:

Citation:

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....:aie:

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:

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">  </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 ;)

14/06/2007, 17h13
Djakisback

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 ?
15/06/2007, 08h24
Invité

Qu'est-ce que tu entends par :

Citation:

Envoyé par Djakisback

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

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:

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'));

15/06/2007, 15h21
Invité

Ton script fait exactement ce que j'aimerais faire merci mais il est incompatible firefox....
15/06/2007, 15h43
Djakisback

Euh, je l'ai testé sous la 1.5 et la 2.0 et il fonctionnait très bien, t'as quoi comme erreur ?
15/06/2007, 15h46
Invité

Tou simplement que j'arrive pas à bouger le cadre..... J'ai juste fait un copier collé de ton code, c'est étrange...