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

Drag and drop ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager