Dan's Drag and Drop

  1. About
  2. Getting Started
  3. API Reference
  4. Custom Events
  5. Compatibility
  6. Compatibility
  7. Custom Event Examples

About     top Dan's dnd is a lightweight drag and drop utitlity for javascript based applications.

It was designed with the following goals in mind: Get the Source !

API Reference     top

Methods and properties exposed by draggable elements:

These are members of the element's object iteself, they are not connected to the dnd function.

Additionally, the dnd function object itself has a couple of methods and properties to be aware of:

Custom Events     top

ondnd event:

ondnd is not part of any standard, which is good since it likely wont be used by or interfere with other scripts. ondnd acts almost identical to any other familiar mouse event like onclick or onmouseup. In ondnd events, this refers to the bottom element, the one "receiving" the draggable. ondnd is also passed the event object of the draggable itself, as the first and only argument. The argument's name is also "event", enabling both IE/W3 browsers to refer to event.property as expected. Note that the event object is actually from the onmouseup event of the draggable, not the element containing the ondnd event. It still provides all of the useful info like .clientX, .shiftKey, and so on. Most notable is the .target property (aka .srcElement, for ondnd only they are interchangable): it contains a pointer to the draggable element object. In this fashion, one event can access and modify both the reciever and the draggable.
To review: this = receiver, event.target=draggable, and everything else is the same as in standard events. NEW in v2 : ondnd event can now be defined on the draggable itself. For these events, this and event.target both point to the draggable. If the landed-on element has an ondnd event, that event fires first, then the draggable's ondnd() fires. Within a draggable's ondnd event, event.drop refers to the landed on element, if and only if that element has an ondnd event. Otherwise, event.drop is undefined.

compatibility     top
Feature Availability
feature description notes IE FF S O
repositioning allows object to be moved around the screen Y Y Y Y Y
persistence saves the position between visits requires cookie Y Y Y Y
custom events simplified dnd event handling
(absolute positioning)
works on top of fold only Y Y Y N
custom events simplified dnd event handling
(fixed positioning)
works on whole page 7+ Y Y N



view full screen

author: dan davis distributed on a creative commons attribution-only license by dandavis, 2008. you must include "by dandavis, 2008" in plain, source-visible, human readable text of your javascript source code.