Donut DragDrop: An Innovative Lightweight Drag and Drop JavaScript Library

JavaScriptSearch
Friday, August 11, 2006; 03:15 AM

Donut DragDrop is a fast JavaScript drag and drop library for JavaScript programmers. While there exist a number of solution for that basic UI functionality, Donut DragDrop distinguishes itself by its novel approach, extendability, and small size.

The script was created by programmer Peter Michaux. Examples and downloads are available from his website at peter.michaux.ca/articles/2006/08/09/donut-dragdrop-release.  The source is available for your use under the MIT license.

The author said he decided to write Donut DragDrap because he found similar methods imperfect.  In most JavaScript drag and drop implementations, the dragged element is always under the cursor, so the browser does not detect a “mouseover” event when the cursor and dragged element enters a target element. Yahoo! UI dragdrop.js v0.10 and Scriptaculous dragdrop.js 1.6. attempt to address this by the following method: while an item is dragged, after every “mousemove” event, the JavaScript loops through many targets to determine which targets are under event’s cursor location. Another approach is to create a new hidden element with a very high CSS z-index for each target element. The hidden element has the same location and dimensions as the visible target element. The dragged element is dragged at a lower z-index; when the cursor and dragged element enter a target, the cursor is directly over the hidden element so the listeners fire.

In contrast, when Donut Drag and Drop is initiated a drag proxy is created from four div layers. This looks like dragging an empty, square div with a border centered under the cursor. Each of the four divs is used to create one side of the square: no part of the composite proxy donut is actually under the cursor. Listeners can be attached to the actual target elements at the beginning of the drag. No looping with each mousemove and no hidden layer are required.

Recently Donut DragDrop was modified so that instead of a JavaScript object for each draggable and target, the script uses CSS class names “draggable” and “target” to identify these.