· Main Page: Drag&Drop, DHTML for Images and Layers
· Optional Commands
· Demos
· DHTML API, Scripting Drag Drop Elements: Reference
· Download

Short History of Updates
4.91 (10. 10. 2008):  Fix: Transparency (opacity filter) of DHTML&Drag&Drop elements works now also in Opera ≥ 9.5.
4.9 (8. 5. 2008):  Important fix: Recalculation of the position and size of elements didn't work if there were relatively positioned elements which were immediate children of the BODY element.
4.89 (13. 6. 2007):  Fix: Unloading a page in IE sometimes took a lot of time if there was a large number of Drag&Drop elements on the page. Thanks to Miguel M. for tracking that issue down.
4.88 (31. 1. 2007):  ADD_DHTML() accepts now multiple layers (DIVs) as arguments, separated by commas. Implemented by Christian Binder, eGroupWare.
4.87 (29. 11. 2006):  * Small performance tweeks.
! Workaround for the "False, erraneous deprecation warnings" bug of Firefox 2.
4.86 (6. 11. 2006):  Added: setHorizontal() und setVertical() methods (parameter: true or false). The state of these element movement restrictions can be checked via horizontal und vertical.
4.85 (10. 2. 2006):  Translucency of DHTML-Drag&Drop elements (TRANSPARENT command, setOpacity() method) works in Opera 9.
4.84 (6. 1. 2006):  Small fixes.
4.83 (9. 11. 2005):  Generally improved compliance with XHTML documents and AJAX applications.
4.82 (9. 11. 2005):  Auto-Scroll-Page functionality works also in Opera 8 and 9.0.
4.81 (6. 10. 2005):  Fixed: copy() method occasionally failed in IE.
4.8 (23. 9. 2005):  + Important and very useful :-) method added: getEltBelow(). Returns the topmost element below the concerned item. Might e.g. be used in my_DropFunc() to get directly the element on which the concerned item has been dropped, and for much more purposes.
4.7 (14. 8. 2005):  + Increased flexibility. The methods setPickFunc(FunctionName), setDragFunc(FunctionName), setResizeFunc(FunctionName) und setDropFunc(FunctionName) allow to assign each drag&drop item specific custom eventhandler functions. Example:
A statement
would tell the library to invoke automatically your custom function mySomeNameDropFunc() whenever the item "someName" is dropped.
* Again enhanced compliance with other scripts: While an item is dragged, the mousemove event is now automatically forwarded to other mousemove functions if such are defined on the page. Similarly, onunload events are forwarded when a user leaves the page.
4.62 (7. 6. 2005):  + New property index. Contains the index of the item within the dd.elements array.
4.61 (21. 11. 2004):  * SET_DHTML() can now be invoked even without arguments, for example just to initialize the script for later ADD_DHTML() calls (see DHTML API, Scripting Drag&Drop Items).
4.6 (18. 11. 2004):  + New command TRANSPARENT. Can be applied to images as well as layers (positioned DIVs), and makes the concerned item semitransparent while it is being dragged.
+ New method setOpacity(). Sets the opacity of an image or DIV. Parameter must be a decimal point number between 0.0 (fully transparent, i.e. invisible) and 1.0 (opaque, not transparent).
TRANSPARENT as well as setOpacity() take effect only in Gecko browsers (Mozilla, Firefox etc.) and Windows IE.
4.56 (29. 10. 2004):  * Workaround for bug in IE: Doesn't crash anymore when a user clicks on the grayed text of a disabled button.
* The library now regards also the z-indices of items whose draggability has been disabled (by use of the NO_DRAG command or the setDraggable(false) method).
4.55 (17. 5. 2004):  + The .hide() method now accepts an optional parameter (value: true) which sets the item's CSS display state to "none" rather than just it's visibility to "hidden". (Note: The library remembers the previous display state of the item - therefore the .show() method never requires a parameter.)
* The autoscroll functionality (SCROLL command) now works also on Mac Safari.
4.54 (9. 5. 2004):  + Added: text property for Drag&Drop&DHTML elements. Contains the html written to a layer by use of the write() method.
4.53 (9. 4. 2004):  * Workaround for memory leak on IE (a bug of IE, not of wz_dragdrop.js) which caused a steady increase of RAM consumption every time a page was reloaded.
4.52 (2. 2. 2004):  * Bugfix: Dropdown lists (SELECT elements) now work (can be expanded and shrinked) within Drag&Drop layers.
4.51 (13. 11. 2003):  + del() method new, disables DHTML- and Drag&Drop-ability of element (image or layer), and removes element from the dd.elements array. Especially useful when layers are to be destroyed which have been dynamically added via ADD_DHTML(). Example: dd.elements.someName.del();
* Recognizes now even the z-indices of images . Note: For cross-browser compatibility including Opera 7, CSS attributes should be declared inline, i.e. within the concerned HTML tags rather than within separate style blocks or files.
4.5 (12. 10. 2003):  * Should now work with Safari (workaround for Safari's 'for loop' bug). Thanks to Matthew S. Clark for tracking down and precisely reporting this Safari bug
+ Command CURSOR_TEXT added, switches cursor on concerned Drag'nDrop item to 'text'.
+ setCursor() method added. Accepts as parameter either a CSS cursor value as string, for example dd.elements.someImg.setCursor('hand');, or alternatively one of the API's cursor commands, for example dd.elements.someImg.setCursor(CURSOR_HAND);
4.49 (20. 9. 2003):  * Autoscroll-functionality not enabled by default. Can be activated by SCROLL command.
* Slightly improved performance, slightly shorter source code.
4.48 (11. 9. 2003):  + New methods setResizable() and setScalable() allow to enable/disable the possibility to resize/scale the concerned item with mouse plus <SHIFT> or <CTRL>.
4.47 (31. 8. 2003):  * Some minor performance tweaks.
4.46 (30. 5. 2003):  + New commands MAXWIDTH, MAXHEIGHT, MINWIDTH, MINHEIGHT specify maximum / minimum values to which an element can be resized with mouse+<Ctrl> or mouse+<Shift> (if the command RESIZABLE or SCALABLE has been applied to the element).
+ Improved capabilities to handle nested layers.
4.45 (20. 5. 2003):  + New method .setDraggable(), capable to switch the drag&drop ability of an element off (parameter false) or on again (parameter true).
+ New property .bgColor retrieves the background color of a layer.
* Now, even browsers which actually don't support the library, "virtually" create the complete dd.elements array and any of it's properties/methods (provided these browsers understand JS1.2 syntax). This should make extended scripting with minimized JS error probability easier - it's no longer required to check for the existence of DHTML & Drag&Drop elements to avoid JS errors in such browsers.
* Bug with Auto-Scroll funktionality fixed: Relatively positioned layers can't scroll off the visible client area anymore when dragged closely to the window boundary. This problem occasionally happened in browsers which create/change window scrollbars for absolutely positioned layers, but not for relatively positioned ones.
* Bug fixed that occured in Mac-IE and Windows-IE 5.0 when the command CURSOR_HAND was used.
4.44 (13. 5. 2003):  * CURSOR commands can now be applied to Drag&Drop items individually.
4.43 (5. 5. 2003):  + New command, usable globally and individually: SCALABLE. Similar to RESIZABLE (previously KEYDOWN_RESIZE), SCALABLE allows to resize an element with the mouse if the user keeps <Ctrl> or <Shift> pressed. However, SCALABLE preserves the width/height ratio of the concerned element, making the element scalable rather than arbitrarily stretchable.
+ As for elements only the RESIZABLE command has been applied to, to constrain such an element to be scaled rather than to be arbitrarily stretched, the user might press <Ctrl> and <Shift> simultaneously.
4.42 (3. 5. 2003):  * Iframes and applets nested into a layer are hidden while the layer is dragged. This prevents the drag operation from being obstructed.
* Drag&Drop items can't be dragged completely off the visible client area anymore. A 1px wide or high area of the item always remains inside the client area. This is 1.) to prevent Mozilla from crashing the page (internal bug of Mozilla) and 2.) to prevent the user from dropping an element off the client area and hence losing control of the element.
4.41 (25. 4. 2003):  + New properties original (refers to the original of copied images) and src (current URL of image).
+ Method copy() is able to create multiple copies at once, as specifiable by it's optional parameter. Moreover, copy() automatically attaches copies to the layer to which the original is currently belonging.
+ New function body for extended scripting: my_ResizeFunc(). Automatically invoked while element is resized (Resize Mode).
4.4 (23. 4. 2003):  New methods:
+ addChild() which is capable to append images dynamically to a layer. This method is even able to 'steal' images from other layers.
+ Method copy() to copy images dynamically.
* Drag'nDrop ability of elements is now immediately initialized once SET_DHTML has been executed, i.e. isn't delayed anymore until the page has fully loaded.
4.3 (17. 4. 2003):  Editability of input elements inside draggable layers unlimited; selecting text doesn't start a drag movement anymore. Passing values to commands facilitated. Commands for maximal offset of dragged elements from their default position implemented.
4.21 (15. 4. 2003):  Bugfix: Invisible layers unintendedly became visible if the function for determining their size was executed.
4.2 (7. 4. 2003):  Capability to write to layers and to change background colors implemented. Methods detachChild() and attachChild() to toggle dependence of images from their parent layer. Improved re-integration of elements into the logical structure of the page after the window or layers have been resized: Images and relatively positioned layers keep their relative offset from their default positions even if line breaks have been changed. Some minor tweaks.
4.12 (25. 3. 2003):  Drag'nDrop layers keep their CSS overflow property.
4.11 (20. 3. 2003):  dd.srcy-instead-of-dd.scry typo bug fixed. Offset bug fixed that appeared in IE with divs relatively positioned on top level (directly below document element). Improved padding/margin detection. Width (w) and height (h) properties reliably include border widths and paddings, even in browsers which strictly follow the W3C box model. Decreased code length.
4.1 (18. 3. 2003):  By invoking ADD_DHTML('layerName'+COMMAND1+COMMAND2...), layers can be set draggable by way of addition, i.e. at any time even after the page has fully loaded.
4.0 (12. 3. 2003): 
·  Big portions of code rewritten.
· Relatively positioned layers (DIV elements) supported. Even the page reflow can be handled that occurs in most browsers when a relatively positioned element is moved or resized.
· With <Ctlr> or <Shift> kept down during a drag movement, the concerned element is resized instead of dragged.
· moveBy() and resizeBy() methods implemented; in many situations, these may be more convenient than the moveTo() and resizeTo() methods.
· DHTML API provides several new properties and methods.
· VERTICAL command : item can be dragged vertically only.
HORIZONTAL command : element can be dragged horizontally only.
· Mozilla: Drag movements can't release mouse gestures anymore.
· Auto-scroll functionality which lets the page scroll if the mousepointer approaches one of the window borders. Funktionality can be suppressed throught the NO_SCROLL command.
· Mousedown on scrollbar doesn't start a drag operation anymore if a drag drop item is incidentally placed below it (except with older Mozillas prior to v. 1.0 with their window.innerWidth inaccuracy).
· Most variables renamed to diminish the risk of name interferences with other scripts.
· Many more improvements and tweaks.
· However, Netscape 4 requires transparentpixel.gif again which proved to be more reliable than the document itself to create spacers for drag drop images.


3.47 (23. 2. 2003):  Improved treatment of z-indices.
3.46 (19. 2. 2003):  Now wz_dragdrop.js provides three empty function bodies for custom scripting extensions. These functions are invoked a) when an item starts to be dragged, b) during it's dragged and c) once it has been dropped. These functions may be helpful, for example, to find out which item is currently dragged (or dropped) at which location.
3.45 (12. 2. 2003):  Set-draggable process in Netscape 4 faster again.
3.44 (9. 2. 2003):  Less memory consumption and faster set-draggable process due to methods of drag drop items now being declared as prototypes. A layer's children (images) now automatically follow their mother's moveTo() method. Improved z-index handling; images nested into a layer keep their relative z-indices even if the layer itself is dragged. Script syntax no longer limited to JavaScript 1.1. Partially translated to JavaScript 1.2.
3.43 (7. 2. 2003):  Improved browser sniffing: Identification of Gecko engine browsers now independent from user agent settings.
3.42 (2. 2. 2003):  New property for drag drop items: name . Returns the name or ID passed to SET_DHTML(). May especially helpful to find out the name of the current drag object via the statement dd.obj.name . Width and height attributes for <img> tags not mandatorily required anymore.
3.41 (31. 1. 2003):  Opera 7 problem solved: Doesn't select text during drag operations anymore, and now reliably recognizes mouseup events. Initialization of multiplied images in Netscape 4 (above 4.04) accelerated.
3.4 (28. 1. 2003):  Drag-drop images nested into a drag-drop layer are accessible via the dd.elements.LayerName.children[] array, and will follow the layer's hide() and show() functions. The copies of a drag-drop image multiplied by use of the MULTIPLY command are accessible via the dd.elements.ImageName.copies[] array. Now a method swapImage() to swap drag-drop images is available. Rendering problems of drag-drop images in Mac IE 5.x should be solved.
3.3 (21. 1. 2003):  When a layer is dragged, drag-drop images contained within it will be moved with it. This behavior can be prevented through the DETACH_CHILDREN command.
3.21 (21. 1. 2003):  RESET_Z command works even on layers without predefined z-index.
3.2 (15. 1. 2003):  MULTIPLYn command to multiply drag drop images (creates n copies). Some useless variables leftover from older versions removed.
3.1 (6. 1. 2003):  This version doesn't require the transparent pixel anymore, i.e. "transparentpixel.gif" is unnecessary.
3.03 (5. 1. 2003):  Bug fixed that happened with version 3.02: Konqueror sized drag drop images to 100% of window height instead of to 100% of image container height.
3.02 (5. 1. 2003):  Improved resizeTo() behavior on layers: Text overflow now hidden (clipped off) in Geckos and IE.
3.01 (2. 1. 2003):  resizeTo() for images in Netscape 4 doesn't require HTTP requests anymore.
3.0 (31. 12. 2002):  Now the DragDrop Library has reached the state of a general DHTML library.
resizeTo() method works on drag&drop images too. Believe it or not, even in Netscape 4 (!) and Opera < 7 (see the documentation of the library's JavaScript API for more details).

2.78 (28. 12. 2002):  resizeTo() method for drag drop layers.
NO_DRAG command, useful for animations or web-based applications: Prevents drag drop functionality of an item, but allows full scripting access to it's properties and methods (such as moveTo, resizeTo(), ...).
2.77 (28. 12. 2002):  Drag-Funktionality of hidden drag drop elements suppressed. In this case mousedown events are forwarded.
2.75 (27. 12. 2002): 
New methods hide() und show(), making a drag drop item invisible/visible.
2.74 (21. 12. 2002):  Improved processing of window.onload and document.onmousedown eventhandlers set by other scripts.
2.73 (8. 12. 2002):  Browsers get an order to cache "transparentpixel.gif" to accelerate creation of spacers at the original places of drag-drop images.
2.72 (30. 11. 2002):  NO_ALT command, preventing drag-drop images from keeping their alt attributes, can be used individually (like the CLONE command). New individual command: RESET_Z. After drag-end, the z-index of the element will be reset to it's original value. It's generally easier now to add new commands.
- Input elements in drag-drop layers were un-editable in Gecko-browsers.
- Netscape 4: Reloads after window.resize events were unreliable.
2.71 (19. 11. 2002):  Minor tweaks.
2.7 (17. 11. 2002):  Supports expanded DHTML abilities of Opera 7.
2.63 (11. 11. 2002): 
Regards the fact that Konqueror v3.0.3, contrary to v3.0.0, relates event-coordinates to visible client area.
2.62 (1. 11. 2002):  Compatibility further improved. The Drag&Drop Library now takes control over window.onload event handlers of other scripts. So it should be able to preserve it's own document.onmousedown event handler if another script tries to override it finally.
2.61 (30. 10. 2002):  Works in IE 4 again, as did v2.55, but not v2.6 (assigning properties to event object failed in IE4).
2.6 (30. 10. 2002):  Improved compatibility. Instead of destroying event handlers of other scripts, the Drag&Drop Library only overrides them temporarily during drag&drop operations to restore them immediately after mouseup.
2.55 (29. 10. 2002): 
Drag&Drop images keep ALT attributes (not in Netscape 4). This can be globally suppressed via NO_ALT command as a separate argument in SET_DHTML.
2.53 (27. 10. 2002): 
Some tuning, especially regarding Galeon.
2.52 (27. 10. 2002):  Less sticky drag behavior of old Gecko-Engine browsers on slow machines
2.5 (26. 10. 2002):  External reference to drag&drop elements via JavaScript facilitated => elements may be animated
2.4 (26. 10. 2002):  When page is loaded, images don't flicker anymore during set-draggable process (conspicious especially in Netscape 4 and Opera).
2.3 (25. 10. 2002):  Images in drag&drop-layers may be set draggable.
2.1 (23. 10. 2002):  Links in drag&drop-layers work.
2.0 (23. 10. 2002):  Added: Drag&drop functionality for layers.

1.6 (21. 10. 2002):  Size of file slightly decreased.
1.59 (20. 10. 2002):  Workaround for occasional problem of Netscape 6 to cache image clones. Size of file slightly decreased.
1.58 (19. 10. 2002):  Problem of Opera 5 to release mousemove-event-listening solved.
1.57 (17. 10. 2002):  Mousemove event-listening limited to mousepressed-over-dragdrop-image state => reduced probability of interference with other JavaScripts. Size of file slightly decreased.
1.56 (7. 10. 2002):  Work-around for bug [1] in Opera 5 and 6.
1.55 (6. 10. 2002):  Size of file slightly decreased, performance slightly improved.
1.54 (28. 9. 2002):  Stricter  treatment of resize bug [2] in Opera 5 and 6: Page is reloaded.
1.53 (21. 9. 2002):  Minor "cosmetic" changes of source code, improved performance.
1.52 (15. 9. 2002):  Size of script file decreased.
Improved error-handling (e. g. if a non-existing image is called in SET_DHTML).
1.51 (11. 9. 2002):  Improved drag performance with cloned images.
1.5 (4. 9. 2002):  Type of cursor over drag&drop-images can be set on the HTML-page (it's not necessary to touch the script).
1.4 (3. 9. 2002):  DragDrop function limited to left mousebutton (except Mozilla with her apparent event.which-bug ).
Some minor problems with IE4 solved
1.3 (2. 9. 2002):  Ability to clone images
1.2 (2. 9. 2002):  Window-resize events release recalculation of image coordinates
Opera 5, 6: Occasionally the loop calling the constructors of the dragdrop-image objects continued before the respective instances of each loop circle were completed. Could surprisingly be solved through breaking-down speed of loop-processing (artificial delay between loop circles).
Opera tends to upset correlation between positions of Drag and Drop images and their respective js variables, as if reloading the page but not resetting js variables, and may unpredictably refuse proper, even delayed, recalculation.

    Top of page

Walter Zorn, Munich
Impressum / about this page