Dan's Drag and Drop

About
Getting Started
API Reference
Custom Events
Compatibility
Compatibility
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:

tiny code size: (<5kb!) - no external libraries or frameworks required
simple setup: one function, one argument
persistent: re-arranged locations are saved between visits
fast: optimized re-position engine avoids wasted CPU cylces
safe: no extra globals to interfere with other scripts
standalone: no other code required; only the dnd function this is some additional info about the shit. it takes up a few lines that are balks
x-browser:100%:[ IE6, IE7, FF2, FF3, Safari 9], basic: Opera
powerful: custom event (ondnd) for easy drag and drop handlers
expandable: integrated API for even more flexibiliy
customizable: alter visual feedback, grid snapping, and user-resettable

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.

Element.moveTo: (x,y) - moves the element to the pixel coords x, y. expects Numbers, but also accepts style string instead of a Number ex: elm.moveTo(800, 600)
Element.moveBy: (right,up) - moves the element by the pixel distance given to the right and up respectively. expects Numbers, but also accepts style String instead of a Numberex: elm.moveBy(4, '20px')
Element.resizeTo: (w,h) - re-size the element to the pixel dimensions w(width), h(height). expects Numbers, but also accepts style string instead of a Number ex: elm.resizeTo(420, '55px')
Element.hide: () - hides the element if it was visible.
Element.show: () - shows the element if it was hidden.
Element.unSize: () - restores the size of the element prior to the last resizeTo.
Element.unMove: () - restores the position of the element prior to the last MoveTo or MoveBy
Element.undelete: () - un-moves the element and shows it if hidden.
Element.dnd: True - a boolean property of the element to identify it to other script as draggable.
Element.oldPos: [] - an array of objects describing the original position of the element at time of boot, and any changes since. ex: [{left: '5px', top: '222px', z: 654}]
Element.oldSize: [] - an array of an objects describing the original size of the element at time of boot, and any changes since. ex: [{width: "420px", height: "350px" }]
Element.landedOn: {Element } - the element behind the last dropped element. (not compatible with opera)

Element._saveOldPos: () - used internally by dnd, it adds a position history item for the undoMove method.

Element._saveNewPos: () - used internally by dnd, it saves the position of the element to a cookie.

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

dnd.reset: () - after confirmation, resets the position of all elements to the default, and reloads the page.
dnd.hlColor: String CssColor - sets the color of the border of the element during a drag.
- can be set to "transparent" to disable the effect, default is yellow.
dnd.useFixed : Boolean - use fixed positioning to float draggable elements above other scrolling content?
(great for tool/nav bars, but not compatible with IE6. default is false)
dnd.z: Number - the current "top of the stack" zIndex. increments each drag.
dnd.snap: Number - snap draggables to a virtual screen grid this # of pixels wide (default is 0)
dnd.items: [] - the ids of the draggble elements.

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

top

demo

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.