Drag & drop d'un DIV en JavaScript

**moon06** · 01/02/2006, 20h55

Bonsoir

Pour commencer, il faut dire que j'ai jamais vraiment fait de JavaScript ... donc ce que je fais est un peu à tatillon ! Dans le cas présent j'ai récupéré en grosse partie un script d'un site spécialisé ...

Mon problème est le suivant : comme vous pouvez le voir sur http://www.zonehd.net/drag.php , on peut déplacer le div avec la souris. Vous l'avez sûrement remarqué, au premier mouvement, le div se décale tout seul ... ensuite plus de problème, il suit correctement le curseur !

Voici le code source au cas où :

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
87
88
89
<html>
<style type="text/css">
	.transparent {
	top:100px;
	left:100px;
	background-color:#cccccc;
	position:absolute;
	width:200;
	height:200;
	cursor:move;
	}
	.textetransp {
	color:#ffffff;
	text-decoration:none;
	filter: alpha(opacity=100);
	opacity:1;
	background-color:#336699;
	}
	</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 != "transparent")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }
 
  if (fobj.className=="transparent")
  {
    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="transparent" id="transp"><br />
<font class="textetransp">Ceci est un essai</font> <br />
<a href="#" onclick="document.getElementById('transp').style.visibility='hidden';">Fermer !</a></div>
 
</body>
</html>

Merci de votre aide par avance

**siddh** · 02/02/2006, 10h04

regardes ca :
http://www.developpez.net/forums/viewtopic.php?t=441713

**Wormus** · 02/02/2006, 11h30

c que tu as oublier de mettre le tag résolu parce que je vois que ça fonctionne très bien !

En tout cas c'est extra, j'avais déjà vu ça mais je me demander comment c'était réalisable !!

Drag & drop d'un DIV en JavaScript

JavaScript

Discussions similaires

Partager

Partager