|
JavaScript: DHTML Bibliothek,
Drag & Drop für Bilder und Layer.
JavaScript Bibliothek. Entwickler: Walter Zorn
|
|
Eine Cross-Browser JavaScript-DHTML-Bibliothek, die Layer (DIV-Elemente) und Bilder mit einem einzigen Funktionsaufruf in DHTML-Elemente verwandelt und mit der Maus verschiebbar (drag&drop-fähig) macht.
Bilder müssen nicht einmal per CSS positioniert (hartkodiert) sein, sondern können ganz normal (logisch) im Seitenaufbau und  Textfluss integriert sein.
Um Bilder oder Layer dhtml- und drag&drop-fähig zu machen, müssen lediglich ihre Namen bzw. IDs einem Funktionsaufruf SET_DHTML() übergeben werden.
wz_dragdrop.js habe ich nicht in erster Linie dafür entwickelt, Seitenbesuchern nur im IE ein paar mit der Maus verschiebbare Layer oder Bildchen zu präsentieren,
sondern auch als clientseitiges Crossbrowser-API für interaktive Webseiten und Webanwendungen.
|
Größe mit der Maus verändern
War zu Beginn (beim Mousedown) eines Drag-Vorgangs  die Shift-(Umschalt-)Taste gedrückt, arbeitet wz_dragdrop.js im Größenänderungs -Modus, auch im Netscape 4 und Opera 5 und 6.
Diese optionale Funktionalität kann mit dem RESIZABLE-Kommando für einzelne oder alle JavaScript Drag Drop Elemente aktiviert werden.
Bei Verwendung des alternativ möglichen SCALABLE-Kommandos behält das Element sogar sein Breite/Höhe-Verhältnis bei.
Auf diesen Seiten ist die RESIZABLE-Funktionalität übrigens global aktiviert.
Auf meiner 8-Megameter-Radtour durch Norwegen, Nord-Finnland und Schweden
(Hamburg-Nordkap-Kirkenes-Trelleborg-München)
|
Welche Browser?
Bis auf ein paar selten verwendete Exoten können alle Browser das DHTML & Drag & Drop JavaScript ausführen. Im Einzelnen:
Linux:
Browser mit Gecko-Engine (Mozilla, Netscape 6+, Galeon...), Konqueror ab v.3.2, Netscape 4, Opera 5, 6, 7.
Windows:
Gecko-Browser (Mozilla, Netscape 6+, Phoenix...), Netscape 4, Opera 5, 6 und 7, Internet Explorer 4+.
Andere Systeme:
Mac-Safari einwandfrei.
Gecko-Browsern, Netscape 4 und Opera 5+ wird die Interpretation des DHTML & Drag&Drop JavaScript 's erlaubt, weil ich das gleiche Verhalten wie bei den Linux- bzw. Windows-Pendants vermute.
Einen Mac zum Testen habe ich nicht.
Falls ein Problem mit dem JavaScript DHTML API auftritt, teilen Sie es mir bitte per Mail mit.
|
|
Größenänderungen des Fensters
Bilder und relativ positionierte Layer behalten ihre räumlich-logische Eingliederung in die Seitenstruktur bei,
werden also automatisch so versetzt, wie es veränderte Zeilenumbrüche, Tabellengrößen etc. erfordern.
Sofern ein Element zuvor mit der Maus verschoben wurde, bleibt sein relativer Abstand zum Normalplatz im Textfluss erhalten.
Das heißt: Diese DHTML-Drag-Drop-Bibliothek lässt sich auch auf nicht hartkodierten Seiten nicht so ohne weiteres durcheinanderbringen, wenn dem User einfällt, die Fenstergrößen zu verändern.
Skitour in Südtirol
|
Drag & Drop Script einbinden
1. HTML-Datei: Namen für Drag&Drop-Elemente
Bilder:
Jedes Bild, das dhtml - und drag drop -fähig werden soll, muss einen nur einmal vergebenen Namen haben (name-Attribut):
<img name="name1" src="bildchen.jpg" width="240" height="135">
Die Attribute width und height
dürfen keine Prozentangaben wie "33%" sein, sondern nur absolute Werte wie "240".
Layer:
Müssen absolut oder relativ positioniert und mit einer eindeutigen ID gekennzeichnet sein:
<div id="name2" style="position:absolute;...">Inhalt</div>.
|
|
2. Codeschnipsel in HTML-Datei einfügen
Folgende Codeschnipsel innerhalb des <body>-Bereichs einfügen.
Diese Zeile am besten unmittelbar nach (keinesfalls vor!) dem öffnenden <body>-Tag:
|
|
<script type="text/javascript" src="wz_dragdrop.js"></script>
|
|
|
|
Und diesen Schnipsel unmittelbar vor dem schließenden </body>-Tag:
|
<script type="text/javascript">
<!--
SET_DHTML("name1", "name2", "nochEinLayer", "letztesBild");
//-->
</script>
|
|
|
|
Dem Funktionsaufruf SET_DHTML( ) müssen, wie man sieht, lediglich die Namen der Bilder und Layer (DIV-Elemente) mitgegeben werden,
mit Kommata voneinander abgetrennt und jeweils in Anführungzeichen, Reihenfolge beliebig.
|
|
 |
| Am Nordkap, auf meiner zweiten Scandinavien-Radtour |
3. Scriptdatei speichern
Die JavaScript-Datei downloaden und entzippen.
Entweder als wz_dragdrop.js im selben Verzeichnis wie die HTML-Datei speichern, oder den Pfad "wz_dragdrop.js" in obigem Codeschnipsel entsprechend anpassen.
4. Transparentes 1-Pixel-Gif speichern
Das Bild namens transparentpixel.gif ist in der Download-Datei wz_dragdrop.zip enthalten.
Es wird vom Netscape 4 als Platzhalter für die Drag Drop Bilder benötigt und muss im selben Verzeichnis wie die HTML-Datei gespeichert werden.
5. Funktioniert nicht?
Dann funktioniert (hoffentlich) alles.
Wenn nicht:
a) Die HTML-Datei und die CSS-Syntax überprüfen, beides am besten mit dem W3C-Online-Validator unter http://validator.w3.org/.
b)
Überprüfen, ob die Schritte 1 bis 4 zur Einbindung befolgt wurden (mit Abstand häufigste Fehlerursache).
c)
Die JavaScript-Fehlerkonsole Ihres Browsers konsultieren.
Eine JavaScript-Fehlermeldung beruht praktisch immer auf fehlerhafter Einbindung oder Syntax-/Logikfehlern in eigenen Scriptzeilen.
Bitte haben Sie Verständnis, dass ich lieber entwickeln als fremde Seiten debuggen möchte.
d)
Manchmal kommt es in XHTML-Dokumenten zu Problemen, weil XHTML kein document.write() zulässt.
Dann hilft nur Umstellung auf eine andere DTD, z.B. HTML4.01.
Bitte behaupten Sie nicht, Sie hätten einen Bug gefunden
- außer Sie haben alles sehr sorgfältig überprüft und sind sich ganz sicher.
Feedback ist natürlich willkommen!
|
DHTML API
Bild vervielfältigen oder...
...der Cursor soll sich über Drag und Drop Elementen ändern (so wie auf dieser Seite),
oder ein Bild soll in einen Schieberegler mit definierten Endanschlägen verwandelt werden
(mit dem sich dann mit Hilfe des DHTML-API Weiteres anstellen lässt - z.B. Schieberegler-Stellung auslesen, in Farbe umrechnen und per setBgColor()-Funktion einem Layer oder transparenten Bild zuweisen)?
Geben Sie dem Funktionsaufruf SET_DHTML() die passenden Kommandos mit.
swapImage()
Drag & Drop Elemente mit JavaScript steuern
Wenn Sie diese Drag-Drop JavaScript -Bibliothek als DHTML API verwenden, können Sie Bilder und Layer mit einfachen Zeilen steuern und müssen sich nicht mehr mit Browser- und DOM-Erkennung und browserspezifischer Notation abgeben; darum kümmert sich die Bibliothek intern.
Beispiel:
Mit der einfachen Zeile
dd.elements.meinBild.moveTo(200,300);
verschieben Sie ein Bild namens "meinBild" an die absoluten, document-bezogenen Koordinaten (200,300), die Notation
dd.elements.meinBild.x
liefert die momentane X-Koordinate des Bildes, und zwar in jedem Browser, der das Script interpretieren kann.
So kann eine simple Webseite mit ein paar Bildern und/oder DIVs in eine benutzer-interaktive grafische Anwendung verwandelt werden, die mit den Koodinaten der Elemente arbeitet.
 
|
 Download
wz_dragdrop.js 4.91, Lizenz LGPL:
wz_dragdrop.zip (12 KB, enthält auch transparentpixel.gif).
Achtung:
1.) Falls Sie eine Version älter als v.3.4 als Basis für eigene Anwendungen verwenden und auf die aktuelle Version upgraden wollen:
Das Array der DHTML & Drag Drop Elemente wurde ab Version 3.4 von dd.element in dd.elements umbenannt.
Sie müssen also Ihren eigenen Code entsprechend ändern, falls Sie dort den Ausdruck dd.element verwendet haben (siehe auch Referenz des DHTML API).
2.) Ab Version 4.0 wurde die Bibliothek von dragdrop.js in wz_dragdrop.js umbenannt.
3.) Ab Version 4.2 wurde die Methode activate() in maximizeZ() umbenannt.
4.) Ab Version 4.31 wurde das Kommando MULTIPLY in COPY umbenannt und wird wie folgt verwendet:
Schreiben Sie "imageName"+COPY+12 anstatt "imageName"+MULTIPLY12, um 12 Kopien eines Bildes namens "ImageName" zu erzeugen.
5.) Ab Version 4.41 wurde SET_DRAGGABLE() in SET_DHTML() umbenannt und ADD_DRAGGABLE() in ADD_DHTML().
|
|
|
|
English version
