DIV Position ändern - relative position zum Cursor beibehalten

[mupilz]

hallo,
ich wollte, zum Ausgeben von Fehlermeldungen auf einer Website, ein DIV erstellen, dessen Position man ändern kann, wie bei einem richtigen Fenster.
Dabei sollte aber die Position der DIV Rändern relativ zur Cursorposition gleich bleiben, also wenn der Cursor auf dem DIV eine Position von (100|20) hat, soll diese auch beibehalten werden.

Um das Feld zu bewegen, benutze ich folgende Funktion:

<script type="text/JavaScript">
function move(field)
{
    if (clicked[field]) // Wenn das DIV aktiv ist (also die maus darüber gedrückt ist)
    {
        var left = x - (x - parseFloat(document.getElementById(field).style.left.split("px")[0])); // x ist die absolute x-koordinate des Cursors
        var top = y - (y - parseFloat(document.getElementById(field).style.top.split("px")[0])); // y ist die absolute y-koordinate des Cursors
        document.getElementById(field).style.left = left + 'px';
        document.getElementById(field).style.top = top + 'px';
    }
}
</script>

Auf die Art tut sich aber garnichts.

wenn ich es z.B. so schreibe:

<script type="text/JavaScript">
function move(field)
{
    if (clicked[field]) // Wenn das DIV aktiv ist (also die maus darüber gedrückt ist)
    {
        var left = x - (x - parseFloat(document.getElementById(field).style.left.split("px")[0])); // x ist die absolute x-koordinate des Cursors
        var top = y - 1; // y ist die absolute y-koordinate des Cursors ( anstatt der relativen y-koordinate eine 1)
        document.getElementById(field).style.left = left + 'px';
        document.getElementById(field).style.top = top + 'px';
    }
}
</script>

funktioniert es komischerweise. Allerdings bleibt dabei ja nicht die relation bestehen :(

Habt ihr eine Ahnung, was ich falsch mache?

ich würde mich über zumindest eine Anregung freuen ;)

mfg mupilz

 

[Asterixus]

Ich habe mich da auch mal dran versucht, bin aber zum Entschluss gekommen ein JavaScript-Framework zu benutzen.

Schau mal nach Mootools oder jQuery

 

[mupilz]

hm, okay
Vielen dank schon mal, da muss ich mich dann mal irgendwann durchbeißen ;)
aber ich finds sehr, sehr komisch, dass das so nicht funktioniert :/ vor allem, weil es mit nur einer Achse ja funktioniert!
Aber vielleicht muss ich das so hinnehmen :(

mfg mupilz

EDIT:
ich habe doch eine Lösung gefunden ;)
man muss einfach wenn das DIV aktiviert wird, die relative Position des Cursors zum DIV bestimmen und speichern. Die Position bleibt ja sonst immer gleich.
(sorry, ich kanns nicht wirklich erklären, da bin ich ganz mies drin :( )
ich poste einfach mal den Code der gesamten Datei:

<div style="width:0px; height:0px; text-align:center; border:2px outset brown; left:50px; top:50px; background-color:#FF0000; position:absolute; overflow:hidden;"
    id="message"
    onmousedown="JavaScript:click('message', true);"
    onmouseup="JavaScript:click('message', false);"
    onmousemove="JavaScript:move('message');">Meldung</div>
<script type="text/JavaScript">
document.onmousemove = setCoords;
// Globale Variablen
var clicked = new Array();        // Welche DIVs gerade Aktiv sind
var clickPos = new Array();    // Die Relativen Coursor Positionen
var already = new Array();        // Zum bestimmen, ob ein DIV schon wieder unsichtbar sein sollte
var x, y;                            // Absolute Koordinaten des Cursors
function setCoords(e)
{
    var browser = navigator.userAgent;
    if (browser.indexOf('Opera') == -1 && browser.indexOf('MSIE') == -1)
    {
        x = e.pageX;
        y = e.pageY;
    }
    else
    {
        x = event.clientX;
        y = event.clientY;
    }
}
fadeIn(200, 100, 'message');                    // DIV anzeigen
setTimeout("fadeOut('message');", 10000);    // DIV ausblenden
function fadeIn(width, height, id)
{
    var doc= document.getElementById(id).style;
    doc.display = "block";
    if ((parseInt(doc.height.split("px")[0]) <= height) || (parseInt(doc.width.split("px")[0]) <= width))
    {
        doc.height = (parseFloat(doc.height.split("px")[0]) + 4) + 'px';                        // Pro Rekursion wird die Höhe um 4 Pixel erhöht
        doc.width = (parseFloat(doc.width.split("px")[0]) + ((width/height)*4)) + 'px';        // Pro Rekursion wird die Breite So erhöht, dass das DIV seine Volle Breite zur Selben Zeit wie Höhe erhält
        setTimeout("fadeIn(" + width + ", " + height + ", '" + id + "')", 1);
    }
}
function fadeOut(id)
{
    if ((!clicked[id]) || ((already[id] == true) && (clicked[id] == true)))
    {
        var doc= document.getElementById(id).style;
        if (parseInt(doc.height.split("px")[0]) > 0 || parseInt(doc.width.split("px")[0]) > 0)
        {
            doc.height = (parseFloat(doc.height.split("px")[0]) - 4) + 'px';
            doc.width = (parseFloat(doc.width.split("px")[0]) - ((parseFloat(doc.width.split("px")[0])/parseFloat(doc.height.split("px")[0]))*4)) + 'px';
            setTimeout("fadeOut('" + id + "');", 1);
        }
        if (doc.height == "0px" || doc.width == "0px")
        {
            doc.display = "none";                    // Um auch den Rahmen unsichtbar zu machen, dass das DIV nicht stört
        }
    }
    else
    {
        already[id] = true;            // Das DIV sollte wieder unsichtbar sein, wird aber nicht ausgeblendet, da der Benutzer es gerade aktiv hält, d.h. es Verschiebt
    }
}
function click(field, modus)
{
    if (!modus)
    {
        clicked[field] = false;
        if (already[field])
        {
            fadeOut(field);            // Wenn das DIV schon unsichtbar sein sollte, wird es jetzt unsichtbar gemacht
        }
    }
    else if (modus)
    {
        clicked[field] = true;
        clickPos[field + "_x"] = x - document.getElementById(field).offsetLeft;            // jetzt wird die Aktuelle Relative Cursorposition bestimmt
        clickPos[field + "_y"] = y - document.getElementById(field).offsetTop;            // jetzt wird die Aktuelle Relative Cursorposition bestimmt
    }
}
function move(field)
{
    if (clicked[field])
    {
        var left = x - clickPos[field + "_x"];
        var top = y - clickPos[field + "_y"];
        document.getElementById(field).style.left = left + 'px';
        document.getElementById(field).style.top = top + 'px';
    }
}
</script>