|
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
