Programmierecke
JavaScript:
Verschieben von Elementen
Was macht dieses Skript?
Dieses Skript erlaubt es, Webseiten-Elemente beliebig auf der Seite zu verschieben, indem man sie mit der Maus anklickt und an eine andere Stelle zieht.
Benutzung
Zuerst muss die JavaScript-Datei auf der Seite eingebunden werden, auf der es benutzt werden soll. Dazu kann folgender HTML-Schnipsel verwendet werden:
<script type="text/javascript" src="drag_element.js">
</script>
Dann muss ein onmousedown-EventHandler mit dem Element verknüpft werden, welches den Bewegungsprozess starten soll. Hier kann ein Objekt direkt als Parameter übergeben werden.
<div onmousedown="return lers_startMove(this)">
…
</div>
Alternativ kann auch eine Element-ID übergeben werden, wenn ein anderes Element verschoben werden soll als das, auf welches man soeben geklickt hat.
<h1 onmousedown="return lers_startMove('menu')">
…
</h1>
Versionsgeschichte
v1.1
- Einschränkung entfernt, dass ein Element absolut positioniert sein muss
- Funktionen und globale Variablen gepräfixt, um die Wahrscheinlichkeit von Namenskollisionen mit anderen Skripten zu reduzieren
- eine weitere CSS-Klasse zum angeklickten Element hinzugefügt, sodass andere Styles (z.B. ein anderer Cursor) dafür gesetzt werden können
v1.0
X
DEMO
Einschränkungen
- Wenn das zu bewegende Element absolut positioniert werden soll, so muss dies im "style"-Attribut des Elementes vermerkt sein. Es reicht nicht, diese Angabe in einer CSS-Klasse zu definieren.
- In allen anderen Fällen nimmt das Skript "position: relative" an und behandelt das Element entsprechend.