Die Drag und Drop-Bibliothek von Walter Zorn

Mit Drag 'n Drop ist hier gemeint, dass man Elemente einer HTML-Seite, das können Grafiken oder Textblöcke sein, mit der Maus "anfassen" und an eine andere Stelle der HTML-Seite verschieben kann. So ein Verhalten kann man nur mit JavaScript umsetzen. Das sieht dann so aus:

Bereits vor einigen Jahren hat Walter Zorn eine JavaScript-Bibliothek, mit der man so einen Effekt in eine Webseite einbauen kann, veröffentlicht. Ich habe vor kurzem festgestellt, das die Website von Walter Zorn komplett verschwunden ist. Obwohl es eine Reihe anderer Möglichkeiten gibt, solche Drag und Drop-Effekte zu realisieren, möchte ich interessierten Nutzer hier die Möglichkeit zum Download der Datei wz_dragdrop.js geben. Außerdem habe ich eine Anleitung zusammengestellt.

Einbau der Drag und Drop-Bibliothek wz_dragdrop.js von Walter Zorn

Zunächst muss die JavaScript-Datei eingebunden werden. Das geschieht am besten im <head>-Abschnitt der HTML-Datei:

<script type="text/javascript" src="wz-dragdrop/js/wz_dragdrop.js"></script>

Beim Einfügen der Grafik, die mittels Drag und Drop verschiebbar sein soll, muss ein ID-Attribut vergeben werden:

<img border="0" id="katze" src="wz-dragdrop/img/azcat.jpg" width="110" height="106">

Abschließend, und zwar am besten am Ende des <body>-Abschnitts erfolgt die Initialisierung:

<script type="text/javascript">
SET_DHTML(CURSOR_MOVE, "katze");
</script>

Man sieht, dass hier die ID des Bildes wieder auftaucht.

Auch dieser Absatz lässt sich verschieben. Wie das funktioniert und welche Initialisierungsparameter es sonst noch gibt,erkläre ich hier: