Drag & drop d'un DIV en JavaScript
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:
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 :)
