molily: Ebenen mit der Maus hin- und herschieben

Beitrag lesen

Hallo,

Da wird dir nix anderes übrig bleiben, als auf HTML5 zu setzen und/oder zu hoffen, das JQuery für html5-fähige Browser auch das native Drag&Drop verwendet

HTML5 Drag’n’Drop hat erstmal nichts mit dem Bewegen von Elementen mit der Maus zu tun. Es ist dafür gedacht, Elemente an ihrer Ursprungsposition aufzunehmen und in andere abzulegen. Das Element wird dabei standardmäßig visuell verdoppelt, und wenn es nicht in ein Drop-Target abgelegt wird, bewegt sich die Kopie wieder zur Ursprungsposition zurück.

Man könnte mit den drag*-Events natürlich etwas basteln, sodass das Original ausgeblendet wird, der body ein Drop-Target ist und das Element beim Drop zur Mausposition bewegt wird. Das ist komplizierter als die klassische Lösung. Und performanter wird sie wahrscheinlich nicht sein, wieso auch? HTML5 Drag’n’Drop wurde nicht zur Verbesserung der Rendering-Performance geschaffen, sondern um die logische Verbindung zwischen verschiebbaren Element und Zielelement in JavaScript herzustellen.

Um die Performance beim Verschieben von Elementen zu verbessern, kann man transform: translate() oder gar translate3d() verwenden. Im Gegensatz zu position: absolute mit top und left werden die CSS-Transformationen üblicherweise hardwarebeschleunigt. Es gibt auch verschiedene Hacks, um das Rendern auf dem Grafikchip zu erzwingen.

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

HTML5 hilft hier einem wenig weiter.

Mathias