Probleme mit getElementById und style.left

html.de-Forum JavaScript
1

Hallo Community,
Ich habe objekte auf meiner Seite, die sich per Drag’n Drop verschieben lassen.
Wenn ich nun ein Objekt verschiebe wird eine Funktion ausgeführt, die Die Position des Objekts in der Datenbank aktualisieren soll.
Doch leider giebt mir die Funktion document.getElementByID().style.left nichts zurück.
Wenn ich nun die Funktion mit einem festen wert tausche, kommt der Wert richtig raus.

Hier der Javascript Code:

[CODE]/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var request = false;
var DesktopBoxID;
var x;
var y;
// Request senden
function updatePosition(BoxID) {
DesktopBoxID=BoxID

    // Request erzeugen
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest(); // Mozilla, Safari, Opera
    } else if (window.ActiveXObject) {
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
        } catch (e) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
            } catch (e) {}
        }
    }

x=document.getElementById(DesktopBoxID).style.left;
y=document.getElementById(DesktopBoxID).style.top;
// überprüfen, ob Request erzeugt wurde
if (!request) {
alert(‚Kann keine XMLHTTP-Instanz erzeugen‘);
return false;
} else {
//document.getElementById(‚desktop‘).innerHTML = ‚<img class="ohne" src="bilder/loading.gif">Öffnen…‘;

        // Request öffnen
        request.open('post', 'updatePosition.php', true);
        // Requestheader senden
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // Request senden

        request.send('PosX='+x+'&&PosY='+y+'&&box='+DesktopBoxID);
        // Request auswerten
        
        request.onreadystatechange = openownFiles2;
        $('#ownFiles').dialog('open');
    }
}

// Request auswerten
function openownFiles2() {
    switch (request.readyState) {
        // wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
        case 4:
            if (request.status != 200) {
                document.getElementById('ownFiles').innerHTML = 'There was an Error!<br>Error:'+request.status;
            } else {
                var content = request.responseText;
                // den Inhalt des Requests in das <div> schreiben
                
                document.getElementById('ownFiles').innerHTML = content;
                
            }
            break;
        default:
            break;
    }
}
[/CODE]

Die Box wird folgendermaßen Definiert:

[HTML]

Test
'; [/HTML]
2

element.style.left bzw right können nicht gelesen werden. Dazu gibt es element.offsetLeft
Aber das damit rkeigst du nicht den richtigen Abstand. Hab hier irgend wo eine Funktion gepostet. such mal getTopLeft

3

Hi Gilles,
also ich hab die Funktion gefunden.
Ich muss also nur das Element übergeben und mir wird Die Position übergeben.
Das funktioniert soweit, aber in welchen Format werden mir die Werte dann zurückgegeben.

function getTopLeft(elm) {
        var x, y = 0;
        
        x = elm.offsetLeft;
        y = elm.offsetTop;
        elm = elm.offsetParent;
      
        while(elm !== null) {
         x = parseInt(x) + parseInt(elm.offsetLeft);
         y = parseInt(y) + parseInt(elm.offsetTop);
         elm = elm.offsetParent;
        }
        return {top:y, left: x};
  }

P.S. Sorry, dass ich im Moment bei Encarnium etwas inaktiv bin aber ich darf im moment nicht so viel vor den Comuter.

4

Die Funktion verbrät unnötig performance offsetLeft/Top sind die Werte in Pixel ohne Einheit, daher ist parseInt() nicht nötig und das doppelte parseInt() ist schlicht Unsinn. Zudem ermittelt es nicht die Postion des Elementes.

[PHP]function getTopLeft(elm) {
var x = elm.offsetLeft;
var y = elm.offsetTop;

    while(elm) {
     x += elm.offsetLeft;
     y += elm.offsetTop;
     elm = elm.offsetParent;
    }
    return {top:y, left: x};

}[/PHP]
Dir Rückgabe ist ein Objekt.

[PHP]var pos = getTopLeft(elm);
alert(pos.top + ‚/‘ + pos.left);[/PHP]

5

[CODE]function getTopLeft(elm) {
var x = elm.offsetLeft, y = elm.offsetTop;
elm = elm.offsetParent; // sonst wird fälschlicherweise offsetLeft/Top addiert

    while(elm) {
     x += elm.offsetLeft;
     y += elm.offsetTop;
     elm = elm.offsetParent;
    }
    return {top:y, left: x};

}[/CODE]
Ich würde da immer noch offsetHeight/Width in das Objekt stecken.

6

Wofür ist den uberhaupt die Schleife?
In meinen Augen ist diese volkommen überflüssig.

7

Wofür ist den die Schleife?
In meinen Augen ist diese volkommen überflüssig!

8

Du kriegst immer nur die Breite nach im Bezug zum Eltern-Element. Somit musst du das machen, bis kein Eltern Element mehr da ist.

Hm das mit dem parseint hatte ich von einem Script so übernommen. Wo ihr es erwähnt ist es natürlich schwachsinn.

9

Angeblich ist X und Y undefined.
das Elem ist doch das element auf dass es sich bezieht oder?

10

nicht X, sondern x und nicht Y sondern y.

var data = getTopLeft(document.getElementById("myid"));
11

Will mir noch jemand antworten? :slight_smile:
Wäre schon, wenn ich mein Problem endlich gelöst hätte!

12

Super! Fantastisch! Perfekt! Grandios! …
Es funktioniert!
DANKE! :smiley:

13

Nee, die Breite nicht, die Position.

und wie das Objekt angesprochen wird, hab ich schon gezeigt.

14

verdeppert ^^ Natürlich die position :smiley: Hab da wohl noch an den Beitrag davor gedacht, der um die Breite ging. My fault :smiley: