 |
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.
(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
|
|
|
