A Cross-browser JavaScript DHTML Library which adds Drag Drop functionality and extended DHTML capabilities to layers and to any desired image, even those integrated into the text Drag & Drop Image flow.
To convert images or layers into draggable DHTML items, simply pass their names/IDs to the library’s main function ‘SET_DHTML()’.
Optional commands allow to change and customize the behaviour of Drag&Drop items in multiple ways. For example, you can limit how far a drag&drop item can be moved, specify the cursor, or multiply drag’ndrop images. The DHTML API of this DHTML Drag&Drop JavaScript is easily understandable. It provides methods to moveTo(), resizeTo(), hide() and show() again drag n’ drop elements, or to copy() images right within the textflow of your page dynamically, and much more. Each DHTML item has properties such as x, y, w, h, z, defx, defy, defw, defh, defz (co-ordinates, size, z-index, and their initial default values, respectively) plus multiple others, which you can read whenever desired. For instance, to store the current position of a drag&drop item, you might write its x and y properties into a
form element, from where you could transmit them to the server. For more details, see the DHTML API and commands reference.
The idea behind wz_dragdrop.js was not merely to drag around some layers or images on a page in IE only, but also to be a cross-browser clientside API for interactive webpages and webbased applications.

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.

<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:

<script type="text/javascript">
<!--

SET_DHTML("layer1", "dolly"+CLONE, "image1", "image3"+CLONE);

//-->
</script> 

Demo: http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Download: http://www.walterzorn.com/scripts/wz_dragdrop.zip

Source: http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Related Listings:

1. Drag and drop table content with JavaScript With few lines of JavaScript, you can drag and drop...
2. Simple Drag n Drop When the ‘#’ link in the example boxes is activated...
3. Dynamic Drag n Drop With jQuery And PHP Drag’n drop generally looks hard-to-apply but it is definitely not...
4. Drag to download with Ajax I was recently directed to a link for a new...
5. Table Drag n Drop Script I’ve been using JQuery for a while now and really...

Do you like this post?

Email: