11548 sujets

JavaScript, DOM et API Web HTML5

Script drag & drop compatible IE mais pas FF

Bonjour a tous,

je suis en apprentissage en javascript, et je viens quérir votre aide Smiley cligne

comme le titre l'indique, j'essai d'appliquer un script de drag and drop, j'ai essayé differents script, plusieurs bien compliqués, mais trop pour que je puisse les adapter a ma page, celui ci etant bien plus simple, et fonctionnel sous IE, j'aimerais bien un coup de main pour améliorer sa compatibilité Smiley cligne
merci par avance !

le script drag&drop tout element ayant pour classe "dragdrop", le voici :

<!-- Begin
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + 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 != "dragdrop")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }
  if (fobj.className=="dragdrop")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0,10);
    ty = parseInt(dobj.style.top+0,10);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
//  End -->
heuuu

vous ne vous moquez pas de moi hein ?

en regardant dans la console javascript de FF j'ai lu :
"Erreur : Erreur d'analyse de la valeur pour la propriété « top ». Déclaration abandonnée."
et idem pour left.

la reponse a moi meme :

le script attribue des valeures a dobj.style.left sans ajouter le "px" Smiley confus

bref, si ce code interresse certains, modifiez comme suis :

if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x[b] + "px" [/b]: tx + event.clientX - x [b]+ "px"[/b];
    dobj.style.top  = nn6 ? ty + e.clientY - y[b] + "px" [/b]: ty + event.clientY - y [b]+ "px"[/b];
    return false;
  }


il fonctionne tres bien et est tres simple ce script Smiley lol
Modifié par titus.sensei (30 Jul 2006 - 02:37)
Administrateur
Bonjour et bienvenue titus.sensei,

merci d'avoir pris le temps de poster la solution à ton problème, cela en aidera peut-être d'autres Smiley jap . Maintenant si le sujet est [Résolu] Smiley rolleyes
Bonjour,

Je me permet de réouvrir ce post car chez moi, ce code :

function AfficheToolTip(csTexte)
{
    document.getElementById('DIV_TOOLTIP').style.top = document.documentElement.scrollTop + window.Event.clientY + "px";
    document.getElementById('DIV_TOOLTIP').style.left = window.Event.x + "px";
    document.getElementById('DIV_TOOLTIP').innerHTML=csTexte;
    document.getElementById('DIV_TOOLTIP').style.display='block';
}
</script>


me donne l'erreur :

a écrit :
Erreur : Erreur d'analyse de la valeur pour la propriété « top ». Déclaration abandonnée.


Merci de votre aide
Ton problème c'est que sous certains navigateurs comme FF, lorsque tu demandes une taille en pixels comme scrollTop (clienY aussi ? je ne suis pas sûr...), il te renvoie le nombre de pixels suivi de "px". Donc :

elm.scrollTop + 30 + "px" equivaut à "150px" + 30 + "px" ce qui donne "150px30px". Alors là, forcément, top ne va pas aimer...

Pour résoudre le problème tu n'as qu'a utiliser parseFloat qui transforme un texte en vrai nombre :
document.getElementById('DIV_TOOLTIP').style.top = parseFloat(document.documentElement.scrollTop) + parseFloat(window.Event.clientY) + "px";


Ainsi tu additionnera bien des nombre et non des chaînes.
Sujet clos
Aller à