Kalle's Bastelbude: Verschiebbare Elemente

[Kalle_B]

Hallöle,

das Zusammenspiel von position:relative und position:absolute funktioniert nicht wie gewünscht. Und in jedem Browser anders, betrachtet mit FF 2.0, IE 6.0 und Opera 9.21

Auf einer ganz normalen HTML- Seite möchte ich einige Elemente verschiebbar machen, angelehnt an
http://javascript.jstruebig.de/javascript/67/#more-67

Wenn diese Elemente nun für das Drag & Drop initialisiert werden, bekommen sie die CSS- Eigenschaft position:absolute, fallen aus dem Textfluss heraus und die folgenden Elemente rücken auf.

Erfolg:
-------
Wenn _alle_ Elemente der Seite verschiebbar sein sollen, kann ich die Initialisierung von hinten nach vorn machen und es ist okay in den genannten Browsern.

Mißerfolg:
----------
Wenn nur _bestimmte_ Elemente verschiebbar sein sollen, packe ich einen Platzhalter von gleicher Größe (width/height) drumherum mit position:relative, dorthinein das Element mit position:absolute.

Doch das funktioniert nur in der Opera wie
gewünscht, obwohl ich die Positionen (offsetLeft/offsetTop) aller Elternelemente aufaddiere.

Wo ist mein Denkfehler?

Lieben Gruß, Kalle

[Felix Riesterer]

Lieber Kalle_B,

das Zusammenspiel von position:relative und position:absolute

es gibt da ein Konzept mit dem offsetParent, wenn sich die position-Art im Elternelement geändert hat.

Wie ich feststellen musste, ist man gezwungen im IE die Vorfahren-Elemente abzuklappern, um deren offset-Werte aufzuaddieren. Der MSDN-Artikel führt zwar eine alternative und schnellere Art und Weise auf (finde den Artikel jetzt nimmer, aber Du kannst Dich generell über offsetParent informieren), die bei mir allerdings nicht zum gewünschten Ergebnis geführt hat.

In meinem Quiz-Script habe ich auch eine Art Drag&Drop-Engine, die bei Bedarf bestimmte Elemente verschiebbar macht. Kannst es ja mal studieren...

Liebe Grüße aus Ellwangen,

Felix Riesterer.