dasgeheimnis: Drag & Drop mit FireFox 2

Hallo,

ich würde gerne ein IMG-Element mit der Maus verschieben. Dazu habe ich eine Datei erstellt, die mit dem IE und mit Opera ohne Probleme funktioniert.

Mit Firefox 2 funktioniert es eher selten. Meistens wird das Bild nicht mitbewegt, sondern es bleibt stehen und der Cursor ändert sich in ein Stop-Symbol. Man muss dann die Maustaste loslassen, dann bewegt sich das Bild wieder. Leider habe ich dies aber so überhaupt nicht programmiert, denn das Bild soll sich nur bei gedrückter Maustaste bewegen (Drag & Drop).

Den gleichen Effekt erzielt man auch mit DIV-Tags.
Kann mir jemand sagen, wo hier das Problem liegt?

Vielen Dank schon mal.

Gruß Ulli

<html>
<head>
<script>
Active = false;
posx = 0;
posy = 0;

function Init() {
document.onmousedown = MouseDown;
document.onmouseup = MouseUp;
document.onmousemove = MouseMove;
}

function MouseDown(e) {
if (!e) e=window.event
srcElement = (e.srcElement) ? e.srcElement: e.target;
if (srcElement.id == "xxx") { Active = true; }
e.cancelBubble = true;
}

function MouseUp(e) {
Active = false;
if (!e) e=window.event
e.cancelBubble = true;
}

function MouseMove(e) {
if (!e) e=window.event
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else {
posx = e.clientX;
posy = e.clientY;
}
if (Active) {
document.getElementById("xxx").style.left = posx-50;
document.getElementById("xxx").style.top = posy-50;
e.cancelBubble = true;
}
}

</script>
</head>
<body onload="Init();">
<img id="xxx" width="100" height="100" style="position:absolute; border:1px solid black;">

</body>
</html>

  1. if (Active) {
    document.getElementById("xxx").style.left = posx-50;
    document.getElementById("xxx").style.top = posy-50;

    Das ist eine CSS Angabe, wenn du deine Seite im Standardmode darstellst, was zu empfehlen ist, erwartet der Browser hier eine Einheit.

    e.cancelBubble = true;
    }

    Meine Erfahrung ist, canelBubble kanst du dir sparen, ein return false reicht, aber Mozilla braucht explizit den Abbruch, http://developer.mozilla.org/en/docs/DOM:event.preventDefault

    Struppi.

    1. Hallo,

      Das ist eine CSS Angabe, wenn du deine Seite im Standardmode darstellst, was zu empfehlen ist, erwartet der Browser hier eine Einheit.

      Wie gibt man denn eine Einheit hinter etwas Berechnetem an?

      Meine Erfahrung ist, canelBubble kanst du dir sparen, ein return false reicht, aber Mozilla braucht explizit den Abbruch,

      Du hast Recht. Mit "return false" funktioniert es auch mit FF2.

      Vielen Dank.

      Gruß Ulli

      1. Hallo dasgeheimnis!

        Wie gibt man denn eine Einheit hinter etwas Berechnetem an?

        Das ist kein Geheimnis ;)

        So wie Du Zeichenketten an Werten verknüpfst: foo = wert +"zeichenkette";

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --

        _ - jenseits vom delirium - _
        <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
        Nichts ist unmöglich? Doch!
        Gök? Gök!