Souci en javascript avec un div : drag & drop !?

Marsh Posté le 01-02-2006 à 20:51:06

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ù (:D) :

Code :

<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

Message édité par moon06 le 01-02-2006 à 20:54:18

---------------
- Si les cons volaient, il ferait nuit tout le temps ! -

Reply

Marsh Posté le 01-02-2006 à 20:51:06

Reply

Marsh Posté le 01-02-2006 à 22:34:18

[:moon06]

---------------
- Si les cons volaient, il ferait nuit tout le temps ! -

Reply

Marsh Posté le 02-02-2006 à 09:58:47

euppe encore

---------------
- Si les cons volaient, il ferait nuit tout le temps ! -

Reply

Marsh Posté le 02-02-2006 à 11:22:18

Hello,

je ne maîtrise pas vraiment à fond le sujet, mais vu qu'il faut que je m'y mette un jour je me suis un peu plongée dans ton code.
Vu le retour à la position 0 0 j'ai supposé qu'il n'arrivais pas à obtenir les coordonnées de départ. Pour une raison que j'ignore, il n'arrive pas à trouver le style.left et style.top depuis ton css (pour la suite ça joue vu qu'ils sont redéfinis dans le code). En plaçant les styles directement dans ta balise id "transp", là ça marche:

<div class="transparent" id="transp" style="{top:100px;left:100px;}>

En espérant que qqn apportera une explication un peu plus probante et peut-être uen solution moins "bricole"

Reply

Marsh Posté le 02-02-2006 à 11:27:27

j'ai trouvé la solution quelques minutes avant ta réponse et c'est exactement ça

en fait apparemment il n'arrive pas à récupérer le top et le left s'ils sont définis dans le CSS et non "style=" .. :whistle:

merci Pitsy

---------------
- Si les cons volaient, il ferait nuit tout le temps ! -

Reply

Souci en javascript avec un div : drag & drop !?

Sujets relatifs:

Leave a Replay