|
JavaScript: DHTML API,
Drag & Drop for Images and Layers
JavaScript Library. Developer: Walter Zorn
|
|
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  flow.
To convert images or layers into draggable DHTML items, simply pass their names/IDs to the library's main function 'SET_DHTML()'.
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.
|
Resize Instead of Drag?
Holding the <Shift> key  while dragging an element lets wz_dragdrop.js work in Resize Mode rather than in Drag Mode.
This functionality can be easily activated by passing to SET_DHTML() the
command
RESIZABLE, or SCALABLE to preserve the width/height ratio of the element.
These commands may be applied, at your option, either to certain or to all of the drag drop elements.
By the way, on these pages the RESIZABLE functionality has been activated globally.
On my 8 megameters bicycle trip through Norway, Northern-Finland and Sweden
(Hamburg-Northcape-Kirkenes-Trelleborg-Munich)
|
Cross-Browser Functionality
Allmost all browsers (see the following list), except of a few rarely used ones, should be able to interpret this DHTML Drag 'n Drop JavaScript.
Linux:
Browsers based on the Gecko-engine (Mozilla, Netscape 6+, Galeon...), Konqueror 3.2+, Netscape 4, Opera 5+.
Windows:
Gecko browsers (Mozilla, Netscape 6+, Phoenix...), Netscape 4, Opera 5, 6 and 7, Internet Explorer 4+.
Other Systems:
Mac Safari works fine.
Assuming that their behavior is essentially the same as with their Linux and Windows counterparts, I've given Gecko browsers, Netscape 4 and Opera 5+ unlimited access to execute the Drag and Drop JavaScript.
|
Window Resize Events
wz_dragdrop.js automatically re-integrates images and relatively positioned layers into the logical structure of the page.
That is, back into the page flow even if line-breaks, table-sizes etc. have changed.
Items that have previously been dragged keep their relative offset from their - also recalculated - default location within the page flow (accessible, by the way, through the defx and defy properties of each item).
That means: A user won't break the API if they decide to resize their browser window.
Ski touring in South Tyrol
|
|
How to include the Drag & Drop Script
1. HTML File: Names for Drag&Drop elements
Images:
Each of the images to be set draggable requires a unique name, as for instance:
<img name="name1" src="someImg.jpg" width="240" height="135">
Width and height attributes are mandatory and should be
absolute numbers like width="240", rather than relative ones like width="33%".
Layers:
Each one requires a unique ID and, contrary to images, must be positioned relatively or absolutely:
<div id="name2" style="position:absolute;...">Content</div>.
|
|
2. Insert pieces of code into HTML file
Insert the following lines inside the <body> section of your html file.
This one immediately after (not before!!!) the opening <body> tag:
|
|
<script type="text/javascript" src="wz_dragdrop.js"></script>
|
|
|
|
And this one directly before the closing </body> tag:
|
<script type="text/javascript">
<!--
SET_DHTML("name1", "name2", "anotherLayer", "lastImage");
//-->
</script>
|
|
|
|
As evident from this example, simply the names of the drag-drop elements must be passed to SET_DHTML( ), each in quotation marks and with commas separated from each other.
Sequence of names may be arbitrary.
|
|
 |
| At the Northcape, on my second Scandinavia bicycle trip |
3. Save script file
Download the JavaScript Drag Drop library, unzipp it and save it as wz_dragdrop.js into the same directory as the html file.
Or adapt the path src="wz_dragdrop.js" within the above code piece if you prefer to save the library to a different directory.
4.Save transparent 1x1 pixel GIF
transparentpixel.gif, coming with the download file wz_dragdrop.zip, is required by Netscape 4 to create spacers at the default places of the drag drop images.
transparentpixel.gif should be saved into the same directory as the html file.
5. Doesn't work?
Then everything should function. If not:
a) Check the HTML and CSS syntax of your page, preferably with the W3C-Online-Validator on http://validator.w3.org/.
b) Make sure that you've carefully followed steps 1. through 4 (by far the most frequent reason for problems).
c)
Check your own JavaScript code for logical errors and syntax errors, the latter e.g. by looking at your browser's JavaScript error console.
d)
Occasionally, problems arise with XHTML DTD pages, since the XHTML specification - annoyingly - doesn't permit document.write().
Then it's inevitable to switch your page to another DTD, preferably HTML4.01.
Don't claim you've found a bug - unless you have everything checked carefully and you're very sure.
Feedback is anyway welcome.
|
DHTML API
Clone or multiply an image?
Or change the cursor?
Or convert an image into a slider with stops?
There are several commands available which change, if passed to SET_DHTML(), the behavior of JavaScript Drag n' Drop items.
swapImage()
Scripting Drag Drop Elements
For example, reading the current coordinates of a certain drag-drop item and then calling its moveTo() method offers an easy way to animate images and layers.
Moreover, you may even convert a simple web page, just containing a few images, into a graphical user interface application, working with the coordinates of the elements (as demonstated with the slider example above)...
The DHTML Drag Drop Library provides an easily understandable, user-friendly interface to the properties and methods of the drag-drop elements.
Using this library as DHTML API you haven't to bother with browser or DOM detection - all this is performed by the library.
For instance, the line
dd.elements.image2.moveTo(300, 200);
would reliably move "image2" to the absolute coordinates (300, 200) in any browser that can interpret the library,
as reliably as the expression dd.elements.image2.x will retrieve the current X coordinate of the image.
 
|
|
German version
Download