• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit getElementById und style.left

Status
Für weitere Antworten geschlossen.
S

supertobs

Mitglied
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;
        }
    }

Die Box wird folgendermaßen Definiert:

HTML: 
<div id="desktopTest" class="desktopicoon" style="position:absolute; left:80; top:90;" >
<a class="desktop"  href="javascript:..."><table class="desktop">
<tr><th><img src="bilder/apps/'.getDesktopIMGSize().'/'.$desktopRow[picture].'"></th></tr>
<tr><td class="name">Test</td></tr></table></a></div>';
 
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
 
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.

Code: 
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.
 
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};
}
Dir Rückgabe ist ein Objekt.

PHP: 
var pos =  getTopLeft(elm);
alert(pos.top + '/' + pos.left);
 
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};
}
Ich würde da immer noch offsetHeight/Width in das Objekt stecken.
 
supertobs schrieb:
Wofür ist den die Schleife?
In meinen Augen ist diese volkommen überflüssig!
Zum Vergrößern anklicken....
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.
 
nicht X, sondern x und nicht Y sondern y.
Code: 
var data = getTopLeft(document.getElementById("myid"));
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben