 |
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 
