 |
Commands available for Drag'nDrop Elements
Global commands, taking effect on all Drag Drop
elements, are to be passed to SET_DHTML() as separate arguments.
Individual commands, on the other hand, are to be appended,
with a plus sign as concatenator, directly to the name/ID of the
concerned element. See examples below.
|
CLONE
(individual, images only) |
 Drag this image around...
CLONE
creates a static copy, devoid of draggability and DHTML
capabilities.
Example:
<script
type="text/javascript">
<!--
SET_DHTML("layer1", "dolly"+CLONE, "image1", "image3"+CLONE);
//-->
</script>
|
|
COPY
(individual, images only) |
 Creates a specifiable number of copies, each being
a fully capable DHTML and Drag&Drop item by its own.
Copies even inherit their originals' NO_ALT, RESET_Z,
RESIZABLE, SCALABLE, SCROLL and size-limiting commands
(MAXWIDTH etc.).
Be carefull with large numbers of copies;
large image file sizes combined with the presence of many drag
drop images might challenge the visitors' browsers.
SET_DHTML("layer1", "muckl"+COPY+5, "anotherImg");
|
CURSOR_HAND
(global and individual, images and
layers) |
Alters the cursor over drag and drop items. Does not work
in Netscape 4 and Opera earlier than ver. 7.
Available cursor commands:
CURSOR_DEFAULT
(preset; default cursor of browser)
CURSOR_CROSSHAIR
CURSOR_MOVE (globally set on this page)
CURSOR_HAND
(pointer, as over links)
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 (as over text)
CURSOR_WAIT (hourglass or something similar)
CURSOR_HELP
SET_DHTML(CURSOR_MOVE, "layer1", "koala"+CURSOR_HAND, "image1");
This example, illustrating again how to use commands
globally and individually, also intimates that individual
commands override global ones.
|
DETACH_CHILDREN
(individual, layers only) |
The default behavior of a drag drop layer
is as follows: If the layer contains images which have been
set draggable by their own (i.e. their names have been passed
to SET_DHTML() too), the library considers these images as
"children" of the layer. Once the layer is dragged, hidden or shown, its children
automatically follow it. The DETACH_CHILDREN command detaches
images from their parent layer, making them independent from
the layer's behavior (example: hide() and show() again).
SET_DHTML("LayerName"+DETACH_CHILDREN, "image2", "image1", "layer2");
|
HORIZONTAL
(individual, images and layers)
|
 The element can be dragged
horizontally only. However, the item's moveTo() and
moveBy() methods by their own aren't affected.
Therefore movements in both directions via scripting are
unlimited.
SET_DHTML("FirstImg", "lguana"+HORIZONTAL);
|
MAXWIDTH, MAXHEIGHT, MINWIDTH,
MINHEIGHT
(individual, images and layers) |
 These commands limit the size
to which an element can be resized with mouse+<SHIFT>, a
functionality feasible for elements to which the
RESIZABLE or SCALABLE command has been
applied. Note: Default setting, if MINWIDTH / MINHEIGHT
haven't been applied, for mimimum width and height is
1 px.
SET_DHTML("deddie"+RESIZABLE+MAXWIDTH+420+MINHEIGHT+45, "anotherImg");
|
MAXOFFBOTTOM, MAXOFFLEFT, MAXOFFRIGHT,
MAXOFFTOP
(individual, images and layers) |
These commands specify how far the item can be maximally
dragged away from its default position. To each of these
commands, its value must be appended with a plus sign. For
example, by combining MAXOFFLEFT and MAXOFFRIGHT with
HORIZONTAL (allowing horizontal movements only), an image
might be converted into a horizontal slider with stops.
The following code
demonstrates how you can build a slider by using just two
images (named "thumb" and "track"). As always with
SET_DHTML(), this code should be inserted immediately before
the closing </body> tag.
<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>
| About these lines: To prevent
the slider track from being draggable, we apply the NO_DRAG
command to it. Then, after SET_DHTML() has been invoked and
while the page is still loading, the thumb is moved to the
center of the track (moveTo() method, visit the API
reference for more details). To ensure the right visual
"stacking order" of these images initially, the third
JavaScript line sets the z-index (setZ() method) of the thumb
beyond the track's. Then, by transforming it into a "child"
and hence "sub-image" of the track, the thumb's position and
behavior is made dependent from the track's - especially
important for window resize events. The last JS line sets the
thumb's default x position (defx) to the center of the track.
To retrieve the current position
of the thumb (current x minus default x coordinate,
dd.elements.thumb.x-dd.elements.thumb.defx ),
use my_DragFunc(), an empty function body for
additional/extended scripting. my_DragFunc(), already included
into the library, is automatically and permanently invoked
while an item is dragged (see API
reference). The above example calculates a color from the
positions of the three slider thumbs. Then, still from inside
my_DragFunc(), the API's setBgColor() method of the
transparent image is invoked.
|
NO_ALT
(global and individual, images only)
|
 De-activates the ALT and
TITLE attributes of the concerned image.
Globally (affecting all drag drop images at once):
SET_DHTML(NO_ALT,
"ImgName1", anotherImg");
Individually:
SET_DHTML("ImgName1"+NO_ALT, anotherImg", "img3"+NO_ALT);
|
NO_DRAG
(individual, images
and layers) |
Disables Drag'nDrop capabilities and converts item into a
"normal" DHTML element (wz_dragdrop.js may be used as general
DHTML library). Access to the item's properties and methods
via scripting, however, remains unlimited, for example reading
coordinates and size, moving, resizing, hiding, showing again,
swapping images etc..
NO_DRAG may
even be useful for the 'Image Buoy' trick which allows to
integrate an absolutely positioned layer into the logical
structure of a page: 1.) Place one or several
non-draggable (NO_DRAG!) transparent 1x1 px images as 'bouys'
into the logical structure or text flow whereever required.
2.) Retrieve the co-ordinates of these invisible images
by their x and y properties (see DHTML-API),
and, 3.) simply by invoking its moveTo() method
accordingly, place the layer relatively to these Image Buoys.
For example, the small blue layer moving around this text
paragraph is controlled by such Image Buoys.
SET_DHTML("blueLayer"+NO_DRAG, "lefttop"+NO_DRAG, "rightbottom"+NO_DRAG);
|
RESET_Z
(global and individual, images and
layers) |
As default behavior, once a drag-drop item starts to be
dragged, its z-index (its place in the visual stacking order
of all elements) is lifted to the top level, and remains there
after drag-end. The RESET_Z command restores the element's
original z-index once the element is dropped. Due to drag-drop
intuitivity issues, I don't recommend to use this command
unnecessarily.
SET_DHTML("layer1", "image2"+RESET_Z, "image1");
|
RESIZABLE
(global and individual, images and
layers) |
 Allows an element to be resized instead of
dragged. Keeping the <Shift> key pressed at the
beginning of a drag movement lets the left top corner of the
element stay fixed whereas the right and bottom boundaries
follow the mouse movement. RESIZABLE (and SCALABLE, see below)
Mode mode works even with Netscape 4 und Opera 5+.
SET_DHTML("layer1", "img1"+RESIZABLE, "anotherImg");
|
SCALABLE
(global and individual, images and
layers) |
 Being an alternative to
RESIZABLE, SCALABLE preserves the width/height ratio of the
element. In other words, SCALABLE enables the element to be
scaled, but, contrary to RESIZABLE, not to be arbitrarily
stretched.
Note about SCALABLE and RESIZABLE: If
one of these commands has been applied globally and the other
one individually, only the individual command, overriding the
global one, takes effect on the concerned element.
SET_DHTML("image1", "image2"+SCALABLE);
|
SCROLL
(global and individual, images and
layers) |
Enables the Auto-Scroll functionality which scrolls the
page automatically when the mousepointer approaches the window
boundary during a drag operation. Thereby scrolling velocity
is non-linearly determined by the remaining distance of the
border, giving the impression that the scrolling velocity
depended from the "pressure" executed towards the boundary.
BTW, on these pages the SCROLL command has been applied
globally.
SET_DHTML(SCROLL, "blueLayer", "image2", "image1", "layer2");
or
SET_DHTML("blueLayer"+SCROLL, "image2", "image1", "layer2");
|
TRANSPARENT
(global and individual, images and
layers) |
 Makes the item semi-transparent
while it is being dragged. This command takes effect in
Gecko-Browsers (Mozilla, Firefox etc.) and Windows-IE.
(Yes, that's me.) |
VERTICAL
(individual, images and layers) |
 Element can be dragged
vertically only. However, the item's moveTo() and
moveBy() methods by their own aren't affected.
Therefore movements in both directions via scripting are
unlimited.
SET_DHTML("FirstImg", "snake"+VERTICAL);
| |
Combine
commands?
Global commands affect all drag drop
elements and must be passed to SET_DHTML() as separate arguments,
separated with commas from each other:
SET_DHTML(NO_ALT,CURSOR_MOVE, "ImgName1","layerName","anotherImg");
To apply multiple individual commands to a certain drag
drop element, use plus signs as connectors, as in the example below:
SET_DHTML("layer1", "muckl"+VERTICAL+COPY+5+RESET_Z, "otherImg");
|
Notes
| |
|
visitors
on www.walterzorn.com since 27. 12. 2002 
