 |
Kommandos für die Drag und Drop Elemente
Globale Kommandos wirken sich auf alle Drag-Drop-Elemente aus und werden SET_DHTML als separate, mit Kommata voneinander abgetrennte Argumente übergeben.
Individuelle Kommandos werden mit einem Pluszeichen an den Namen des Elements angehängt.
|
CLONE
(individuell, nur Bilder)
|
Verschieben Sie dieses Bild mit der Maus...
Das Kommando CLONE (nur für Bilder) belässt eine nicht-drag&drop-fähige Kopie am ursprünglichen Platz des Bildes.
Beispiel:
<script type="text/javascript">
<!--
SET_DHTML("layer1", "dolly"+CLONE, "image1", "image3"+CLONE);
//-->
</script>
|
|
COPY
(individuell, nur Bilder)
|
 Erzeugt Kopien, die gleichfalls mit allem DHTML- und Drag&Drop-Schnickschnack ausgestattet sind.
Die Anzahl wird mit einem weiteren Pluszeichen an das Kommando angehängt.
Die Kopien erben gegebenenfalls auch die Kommandos für Größenbeschränkung (MAXWIDTH etc.) und die Kommandos NO_ALT, RESET_Z, RESIZABLE, SCALABLE und SCROLL; die Vererbung von HORIZONTAL und VERTICAL macht m.E. wenig Sinn und findet deshalb nicht statt.
Halten Sie sich mit der Zahl der Kopien zurück, wenn es sich um große Bilddateien handelt oder wenn es viele Drag'nDrop-Bilder auf der Seite gibt.
SET_DHTML("layer1", "muckl"+COPY+5, "nochnBild");
|
CURSOR_HAND
(global und individuell, Bilder und Layer)
|
Ändert den Cursor über Drag-Drop-Elementen.
Funktioniert nicht im Netscape 4 und Opera älter als 7.
Zur Auswahl stehen:
CURSOR_DEFAULT (voreingestellt, Standardcursor, meist Pfeil)
CURSOR_CROSSHAIR (Kreuz)
CURSOR_MOVE (auf dieser Seite global eingestellt)
CURSOR_HAND (Zeiger, wie über Links und Koala rechts)
CURSOR_E_RESIZE
CURSOR_NE_RESIZE
CURSOR_NW_RESIZE
CURSOR_N_RESIZE
CURSOR_SE_RESIZE
CURSOR_SW_RESIZE
CURSOR_S_RESIZE
CURSOR_W_RESIZE
CURSOR_TEXT (wie über Text)
CURSOR_WAIT (Wartezeichen: Uhr oder Sanduhr)
CURSOR_HELP (Zeichen für Hilfe)
SET_DHTML(CURSOR_MOVE, "layer1", "koala"+CURSOR_HAND, "image1");
Wie in diesem Beispiel angedeutet, kann ein globales Kommando durch ein individuelles überschrieben werden.
|
DETACH_CHILDREN
(individuell, nur Layer)
|
Das Standard-Verhalten eines Drag-Drop-Layers ist wie folgt:
Wenn der Layer Bilder enthält, deren Namen ebenfalls an SET_DHTML() übergeben wurden, betrachtet die Drag&Drop-Bibliothek diese Bilder als "Kinder" des Layers.
Das heißt, sie folgen dem Layer, wenn er bewegt oder mittels seiner hide()- bzw. show()-Methoden unsichtbar oder wieder sichtbar gemacht wird.
Das DETACH_CHILDREN-Kommando veranlasst den Layer, die Bilder nicht als seine Kinder, sondern als vollkommen eigenständige, von ihm unabhängige Drag-Drop-Elemente zu betrachten (hide(), show()).
SET_DHTML("LayerName"+DETACH_CHILDREN, "image2", "image1", "layer2");
|
HORIZONTAL
(individuell, Bilder und Layer)
|
Das Element lässt sich mit der Maus nur waagrecht verschieben.
Wenn die Maus das Element nach oben oder unten verlässt, wird der Drag-Vorgang trotzdem so lange fortgesetzt, bis die Maustaste losgelassen wird.
JavaScript-Steuerung mit der moveTo()- oder moveBy()-Methode bleibt aber in beiden Dimensionen uneingeschränkt.
SET_DHTML("FirstImg", "lguana"+HORIZONTAL);
|
MAXWIDTH, MINWIDTH, MAXHEIGHT, MINHEIGHT
(individuell, Bilder und Layer)
|
Für Elemente, auf die das RESIZABLE- oder SCALABLE-Kommando angewendet worden ist, deren Größe also per Maus und <Umschalt>-Taste verändert werden kann.
Diese Kommandos spezifizieren eine obere und untere Schranke für die Größenänderung.
Anmerkung: Der voreingestellte Minimalwert für Breite und Höhe ist 1 px.
Damit soll verhindert werden, dass ein Benutzer die Größe mit der Maus auf 0 px zieht und so das Element versehentlich verschwinden lässt.
SET_DHTML("deddie"+RESIZABLE+MAXWIDTH+420+MINHEIGHT+45, "anotherImg");
|
MAXOFFBOTTOM, MAXOFFLEFT, MAXOFFRIGHT, MAXOFFTOP
(individuell, Bilder und Layer)
|
Diese Kommandos spezifizieren, wie weit das Element maximal von seiner Ursprungsposition entfernt werden kann (nach unten, links, rechts, oben).
Der jeweilige Wert wird mit einem Pluszeichen angehängt.
Sie könnten ein Bild beispielsweise in einen waagrechten Schieberegler mit Endanschlägen verwandeln, indem Sie MAXOFFLEFT und MAXOFFRIGHT mit dem Kommando HORIZONTAL kombinieren.
Hier der Code, mit dem sich einer der obigen Schieberegler aus zwei Bildern (Schiebeknopf, Bildname "thumb", und Führungsschlitz, Bildname "track") erzeugen lässt.
Der Code sollte, wie immer bei SET_DHTML(), unmittelbar vor dem schließenden </body>-Tag eingefügt werden:
<script type="text/javascript">
<!--
SET_DHTML("thumb"+MAXOFFLEFT+45+MAXOFFRIGHT+45+HORIZONTAL,"track"+NO_DRAG);
dd.elements.thumb.moveTo(dd.elements.track.x+36, dd.elements.track.y);
dd.elements.thumb.setZ(dd.elements.track.z+1);
dd.elements.track.addChild("thumb");
dd.elements.thumb.defx = dd.elements.track.x+36;
//-->
</script>
|
Das Bild des Führungschlitzes soll nicht drag&drop-fähig sein und wird deshalb mit dem NO_DRAG-Kommando an SET_DHTML() übergeben.
Unmittelbar nach dem Aufruf von SET_DHTML(), also noch während des Ladevorgangs der Seite, wird der Schiebeknopf in die Mitte des Schlitzes bewegt (mit der moveTo()-Methode, siehe Referenz des DHTML-API).
Damit der Knopf von Anfang an zuverlässig im Vordergrund des Schlitzes erscheint, wird sein Z-Index mit der setZ()-Methode um 1 höher als der Z-Index des Schlitzes gesetzt.
Um sicherzustellen, dass der Knopf seine Position relativ zum Schlitz beibehält - wichtig vor allem für den Fall, dass die Fenstergröße geändert wird - wird der Knopf mit der addChild()-Methode zu einem "Kind" (Bestandteil) des Schlitzes gemacht.
In der letzten JavaScript-Zeile wird die Default-X-Position (defx) des Knopfes in die Mitte des Schlitzes gesetzt.
Die Stellung des Schiebereglers könnten Sie dann über die Differenz momentane X-Koordinate minus Default-X-Koordinate des Knopfes auslesen (für obiges Beispiel dd.elements.thumb.x-dd.elements.thumb.defx ),
am besten innerhalb der Funktion my_DragFunc() für eigenes erweitertes Scripting, die automatisch permanent während jedes Drag-Vorgangs aufgerufen wird und bereits im Quelltext der Bibliothek enthalten ist.
Von dort aus kann dann auch die gewünschte Reaktion gestartet werden (im dieser Demo die Umrechnung in Farben und der Aufruf der setBgColor()-Funktion (siehe Referenz des DHTML-API), die, wie man sieht, ohne Weiteres auch auf transparente Drag&Drop-Bilder angewendet werden kann!).
Es sind auch andere Schieberegler-Lösungen möglich...
|
NO_ALT
(global und individuell, nur Bilder)
|
Das ALT-Attribut und, falls definiert, das TITLE-Attribut eines DragDrop-Bildes werden deaktiviert.
Globale Verwendung (auf alle Drag-Drop-Bilder wirksam):
SET_DHTML(NO_ALT, "bildName1", nochnBildname");
Individuell:
SET_DHTML("bildName1"+NO_ALT, nochnBildname", "bild3"+NO_ALT);
|
NO_DRAG
(individuell, Bilder und Layer)
|
Unterbindet Drag-Drop-Fähigkeit des Elements.
Mit JavaScript kann aber weiterhin auf die Eigenschaften und Methoden des Elements zugegriffen werden (Koordinaten und Größe auslesen, Bewegen, Unsichtbar- und Sichtbarmachen, Größenänderung, Bild auswechseln usw.).
So lässt sich diese Drag-Drop-Bibliothek auch als allgemeine DHTML-Bibliothek verwenden (siehe JavasScript-Steuerung, DHTML-API).
NO_DRAG ist auch für den 'Bojen-Bild'-Trick nützlich, mit dem Sie einen absolut positionierten Layer in den Textfluss oder den logischen Seitenaufbau integrieren, also quasi in einen relativ positionierten Layer verwandeln können:
1.) Bauen Sie ein oder mehrere transparente 1x1 Pixel große Bilder als 'Bojen' an den gewünschten Plätzen in die Seite ein.
Lesen Sie 2.) die Koordinaten dieser Bilder über ihre x- und y-Eigenschaften aus (siehe DHTML API),
und 3.) platzieren Sie den Layer mittels seiner moveTo()- Methode bei oder in einem bestimmten Abstand zu diesen unsichtbaren Bojenbildern.
Die Bewegung des kleinen blauen Layers um diesen Textabschnitt wird mit diesem Trick gesteuert.
SET_DHTML("blueLayer"+NO_DRAG, "lefttop"+NO_DRAG, "rightbottom"+NO_DRAG);
|
RESET_Z
(global und individuell, Bilder und Layer)
|
Mit Beginn eines Drag-Vorgangs wird der Z-Index des betreffenden Elements auf die höchste Ebene aller Drag-Drop-Elemente angehoben;
das Element verdeckt also jedes andere, mit dem es sich überlappt.
Ohne Anwendung von RESET_Z verbleibt das Element am Ende des Drag-Vorgangs auf dieser Ebene; erst das nächste Drag-Element wird noch eine Ebene weiter angehoben usf..
RESET_Z ordnet das Element am Ende eines Drag-Vorgangs wieder in die ursprüngliche Ebene ein.
Allerdings lässt RESET_Z das Drag&Drop-Verhalten oft weniger benutzerfreundlich erscheinen.
Layern sollten Sie bei Verwendung von RESET_Z per CSS unterschiedliche Z-Indices zuweisen, um die Standard-Stapelreihenfolge eindeutig festzulegen.
SET_DHTML("layer1", "image2"+RESET_Z, "image1");
|
RESIZABLE
(global und individuell, Bilder und Layer)
|
Dieses Kommando lässt wz_dragdrop.js im Größenänderungsmodus arbeiten, sofern bei der Drag-Bewegung die <Umschalt>- (<Shift>)Taste gedrückt gehalten wird, genauer gesagt sich zu Beginn des Drag-Vorgangs im Gedrückt-Status befand.
Im Größenänderungsmodus bleibt die linke obere Ecke des Elements fixiert, während die rechte und untere Seite der Mausbewegung folgen.
Der Modus funktioniert auch im Netscape 4 und Opera 5+ (sonst gäbe es ihn nicht...).
Hinweis: Auf diesen Seiten wurde das RESIZABLE-Kommando global angewendet.
SET_DHTML("layer1", "img1"+RESIZABLE, "anotherImg");
|
SCALABLE
(global und individuell, Bilder und Layer)
|
Ähnlich wie RESIZABLE.
Bei Verwendung von SCALABLE bleibt aber das Verhältnis Breite/Höhe des Elements erhalten.
SCALABLE macht das Element also skalierbar, aber im Unterschied zu RESIZABLE nicht beliebig dehnbar.
Anmerkung zu SCALABLE und RESIZABLE: Haben Kommandos gegensätzliche Wirkungen, überschreiben individuelle (auf ein bestimmtes Element angewendete) Kommandos globale (für alle Elemente gültige).
Wird also eines der beiden Kommandos global verwendet und das andere individuell, ist für dieses Element das individuelle Kommando wirksam.
SET_DHTML("image1", "image2"+SCALABLE);
|
SCROLL
(global und individuell, Bilder und Layer)
|
Lässt die Seite automatisch scrollen, wenn der Mauszeiger einen bestimmten Abstand zum Fensterrand unterschreitet, während das Element gedragt wird.
Dabei ist die Scroll-Geschwindigkeit proportional zum Quadrat der Unterschreitung des Minimalabstandes.
Dadurch soll der Eindruck entstehen, die Scroll-Geschwindigkeit hinge davon ab, wie stark die Maus gegen den Fensterrand "drückt".
Auf diesen Seiten wurde das SCROLL-Kommando global angewendet.
SET_DHTML(SCROLL, "blueLayer", "image2", "image1", "layer2");
oder
SET_DHTML("blueLayer"+SCROLL, "image2", "image1", "layer2");
|
TRANSPARENT
(global und individuell, Bilder und Layer)
|
Das Element ist halbdurchsichtig, während es mit der Maus verschoben wird.
|
VERTICAL
(individuell, Bilder und Layer)
|
Das Element lässt sich mit der Maus nur senkrecht verschieben.
Wenn die Maus das Element nach links oder rechts verlässt, wird der Drag-Vorgang trotzdem so lange fortgesetzt, bis die Maustaste losgelassen wird.
JavaScript-Steuerung mit der moveTo()-Methode bleibt aber in beiden Dimensionen uneingeschränkt.
SET_DHTML("FirstImg", "snake"+VERTICAL);
|
|
Kommandos kombinieren?
Globale Kommandos werden SET_DHTML als separate, mit Kommata voneinander getrennte Parameter in beliebiger Reihenfolge mitgegeben:
SET_DHTML(NO_ALT,CURSOR_MOVE, "bildName1","layerName","nochnBild");
Um einem einzelnen Drag-Drop-Element mehrere individuelle Kommandos mitzugeben, können Sie diese wie in folgendem Beispiel mit Pluszeichen in beliebiger Reihenfolge aneinanderhängen:
SET_DHTML("layer1", "muckl"+VERTICAL+COPY+5+RESET_Z, "otherImg");
|
Fußnoten
|
|
|
