Opera-Problem bei offsetTop (drag-Funktionen)

[Rudi Ratlos]

Hallo,

zum Verschieben von Objekten verwende ich das alte dragObject.js (2007)

Mit Firefox alles ok, mit Opera (12.02 Linux) gibt es beim Initialisieren ein Problem. Die Startposition des Objekts wird gelesen:

    this.ini = function(e_o, o)  
    {  
...  
         move = o || e_o;  
//alert("offsetTop=["+move.offsetTop+"]");  
...  
         var t = move.offsetTop;   // Problem bei Opera  
         var l = move.offsetLeft;  
         move.style.margin = '0';  
         move.style.top  = t + 'px';  
         move.style.left = l + 'px';  

t und l sind 0 (Ziffer Null), das Objekt wird in der linken oberen Ecke des Fensters platziert. Und bei jedem Drag-vorgang springt das Objekt erstmal wieder in diese Ecke. Kennt Opera offsetTop nicht?

Rudi

[1UnitedPower]

Kennt Opera offsetTop nicht?

Scheinbar nicht. Wundern würde es mich nicht, ist immerhin keine Standard-Eigenschaft.

[Rudi]

Hier ist das Problem offsetTop mit Opear schon mal diskutiert worden, ohne Ergebnis.

[Siri]

Hallo,

offsetTop bezieht sich m.W. auf das Eltern-Element. Welche position Eigenschaften haben die? Welchen Doctype hat die Dokument (Quirksmode!)? Könnte da der Fehler liegen?

Viele Grüße
Siri

[JürgenB]

Hallo Rudi,

var t = move.offsetTop;   // Problem bei Opera
         var l = move.offsetLeft;

ich benutze auch offsetTop und offsetLeft, ich hangele mich dann aber bis zum Body durch und addiere die Positionen auf:

 var jb_pos = function(el) {  
  var pos = new Object();  
  pos.x = pos.y = 0;  
  if(el && el.offsetParent){  
   while(el) {  
    pos.x += el.offsetLeft;  
    pos.y += el.offsetTop;  
    el = el.offsetParent;  
   }  
  }  
  return pos;  
 }

S. mein MausOMeter. Ob das im Linux-Opera noch funktioniert, müsstest du mal ausprobieren.

Gruß, Jürgen

[1UnitedPower]

var pos = new Object();}

Iiiih Object-Konstruktor.

[JürgenB]

Hallo 1UnitedPower,

var pos = new Object();}

Iiiih Object-Konstruktor.

immer noch schneller als deine Testseite, die nie fertig wird.

Gruß, Jürgen

[1UnitedPower]

immer noch schneller als deine Testseite, die nie fertig wird.

Aber meine Testseite ist auch keine alternative Syntax um Javascript-Objekte zu erstellen. Fakt ist dass ein Konstruktor-Aufruf wesentlich teurer ist als das Literal-Pendant. Beim Object-Konstruktor ca. 20 bis 30 mal langsamer (Google Chrome).

Ich gebe offen zu, dass sich die Seite noch in einem frühen experimentellen Status befindet. Im Internet Explorer funktioniert sie zum Beispiel auch garnicht.

[JürgenB]

Hallo 1UnitedPower,

immer noch schneller als deine Testseite, die nie fertig wird.

Aber meine Testseite ist auch keine alternative Syntax um Javascript-Objekte zu erstellen.

ich wollte damit auch nur andeuten, dass sie nie fertig wird. (FF 15.0.1).

Fakt ist dass ein Konstruktor-Aufruf wesentlich teurer ist als das Literal-Pendant. Beim Object-Konstruktor ca. 20 bis 30 mal langsamer (Google Chrome).

mein Script stammt aus 2008, damals war "new Object()" noch üblich :). Ich sehe aber ein, dass ich hier mal wieder ran muss. In neuen Scripten verwende ich auch nur noch "{}" und "[]".

Gruß, Jürgen

[1UnitedPower]

ich wollte damit auch nur andeuten, dass sie nie fertig wird. (FF 15.0.1).

Ah danke, werde nach der Arbeit mal schauen, wo das Problem liegt. Version 15 ist ja noch nicht so alt.

mein Script stammt aus 2008, damals war "new Object()" noch üblich :). Ich sehe aber ein, dass ich hier mal wieder ran muss. In neuen Scripten verwende ich auch nur noch "{}" und "[]".

Dann kann man das Verzeihen. Habe den Test ursprünglich für reguläre Ausdrücke entwickelt. Hintergrund ist eine Diskussion, die hier stattgefunden hat.

[Rudi]

ich benutze auch offsetTop und offsetLeft, ich hangele mich dann aber bis zum Body durch und addiere die Positionen auf:

var jb_pos = function(el) {

var pos = new Object();
  pos.x = pos.y = 0;
  if(el && el.offsetParent){
   while(el) {
    pos.x += el.offsetLeft;
    pos.y += el.offsetTop;
    el = el.offsetParent;
   }
  }
  return pos;
}

  
Danke, das ist die Lösung, die mit Firefox \*\*und\*\* Opera läuft.  
  
Ich definiere allerdings kein Object, um ein paar Zahlen zu addieren:  
  
 ~~~javascript
        var t = l = 0;  
         el = move; // move ist das zu bewegende Element  
         while( el )  
         {  
           t += el.offsetTop;  
           l += el.offsetLeft;  
           el = el.offsetParent;  
         }  

Ist es richtig, dass das Zeichen = einen Zeiger setzt? Also das Objekt nur referenziert, nicht kopiert? Eine Kopie ist dann var el = move; ?

Wie kopiere ich dann etwas in eine Variable ausserhalb einer Funktion, wenn also el global sein soll?

Rudi

[1UnitedPower]

Ist es richtig, dass das Zeichen = einen Zeiger setzt? Also das Objekt nur referenziert, nicht kopiert? Eine Kopie ist dann var el = move; ?

Zeiger und Referenzen sind unterschiedliche Dinge. Bei primitiven Datentypen erstellt der Zuweisungsoperator eine Kopie, bei nicht primitiven eine Referenz. Zeiger gibts in Javascript nicht.

Wie kopiere ich dann etwas in eine Variable ausserhalb einer Funktion, wenn also el global sein soll?

Du kannst gloable Variablen auch innerhalb von Methoden setzen. Eine echte Kopier-Methode musst du dir in den meisten selben selber basteln. DOM-Objekte sind eine Ausnahme, die bieten bereits ihre eigenen Kopier-Methoden an.

[JürgenB]

Hallo Rudi,

el = move; // move ist das zu bewegende Element

Ist es richtig, dass das Zeichen = einen Zeiger setzt? Also das Objekt nur referenziert, nicht kopiert? Eine Kopie ist dann var el = move; ?

so weit ich weiß, kopiert Javascript bei Objekten nur den Zeiger. Wenn du ein Objekt echt kopieren möchtest, musst du es neu anlegen und alle Unterelemente und Unterunterelemenete (...) einzeln kopieren. Dazu solltest du aber etwas im Archiv finden. Aber - warum willst du das Objekt denn kopieren?

Zu var:

x = 42; ist eine globale Variable,
var x = 42; in einer Funktion ist eine lokale Variable.

Gruß, Jürgen