English version English version English version
Startseite Vektorgrafik-Bibliothek Tooltips-Script Funktionsgraph-Plotter

JavaScript Drag and Drop und DHTML-Bibliothek
Drag&Drop Image
JavaScript: DHTML Bibliothek,
Drag & Drop für Bilder und Layer.

JavaScript Bibliothek. Entwickler: Walter Zorn
Drag-n-Drop JavaScript für Bilder und Layer
JavaScript Drag and Drop für Layer und Bilder  
Welche Browser?
 
Script einbinden
 
DHTML API
 
Download
 
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 Drag & Drop Image 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.
Mit optionalen Kommandos kann das Verhalten von Drag&Drop-Elementen beeinflusst werden. Beispielsweise lässt sich der Cursor spezifizieren, ein Bild vervielfältigen oder die Verschiebbarkeit auf einen Bereich beschränken. Die DHTML API (Programmierschnittstelle) von wz_dragdrop.js ist intuitiv und einfach verwendbar. Mit moveTo() wird ein DHTML-Drag&Drop-Element verschoben, mit hide() versteckt und mit show() wieder sichtbar gemacht. Mit resizeTo() kann seine Größe verändert werden, copy() kopiert ein Bild an Ort und Stelle. Usw. Die JavaScript DHTML Drag Drop Bibliothek ist objektorientiert. Jedes Element hat Eigenschaften wie x, y, w, h, z, name (absolute Koordinaten, Größe, Z-Index, Name), defx, defy, defw, defh, defz (Standardwerte) und viele weitere. Für spätere Weiterverwendung könnten Sie diese Werte in <input type="hidden">-Formularelemente schreiben und zum Server übertragen. Für eine Beschreibung der API mit einigen Kurzbeispielen siehe DHTML API- und Kommando-Referenzen.
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 Drag n Drop DHTML JavaScript für Bilder und Layer 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 ersten Radtour zum Nordkap
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:
 
Drag und Drop für Bilder und Layer (JavaScript, DHTML) 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.
 
Seitenanfang
 
Welche Browser?
 
Script einbinden
 
DHTML API
 
Download
 
 
 
 
 
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): JavaScript, DHTML: Drag&Drop für Bilder und Layer <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>.
 
Seitenanfang
 
Welche Browser?
 
Script einbinden
 
DHTML API
 
Download
 
 
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.
 
Seitenanfang
 
Welche Browser?
 
Script einbinden
 
DHTML API
 
Download
 
Wieder mal am Nordkap
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...
Drag Drop Bild ...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.
Drag&Drop ImageDrag & Drop Image
· Kommandos (Referenz und Demonstration)
· DHTML API, JavaScript-Steuerung (Referenz und Demo)
· Anwendungsbeispiele (einfach), erstellt mit dem API von wz_dragdrop.js
· Geschichte der Updates (unbedingt lesen, wenn Sie wissen wollen, ob sich ein Update lohnt)
 
 
 
 
Drag&Drop-Bild  
 
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().
 
Seitenanfang
 
Welche Browser?
 
Script einbinden
 
DHTML API
 
Download
 

 

Walter Zorn, München
Impressum und Řber diese Seite

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Drag Drop JavaScript

Mit wz_dragdrop.js als DHTML Bibliothek ist mit wenigen einfachen Zeilen möglich, was sonst einen großen Aufwand erfordern würde...
 
...auch mit Bildern innerhalb von Layern (DIVs)...
 
Zum zweiten Demolayer
 
 
Prüfen, ob Links auch in Drag&Drop-Layern funktionieren. Und ob die Verlinkung zwischen beiden Demolayern auch nach Positionsverschiebungen korrekt arbeitet.
 
Zurück zum ersten Demolayer