Drag and Drop with JavaScript

Link: http://www.sitepoint.com/blogs/2004/03/31/drag-and-drop-with-javascript/

By Simon willison

Walter Zorn's Drag & drop is a dhtml api which makes it easy to add extensive drag and drop functionality to any element on a page. the API supports dragging and resizing and also provides Javascript methods for programmatically moving and resizing elements. it works on an impressive range of browsers right the way back to Netscape 4 and has options that include limiting the area within which an item can be manipulated and restricting resizing to maintain the initial ratio of width to height of an element.

I 've previusly used DOM-drag, a similar library by Aaron Boodman, to create user interfaces that allow users to set the order of items by dragging them relative to each other. aaron recently updated dom-drag's documentation to include even more examples.

I prefer dom-drag's API over Drag & Drop's as it uses smart object orientation to provide hooks for refreshing additional actions when Drag related events occur. drag & Drop's API is less flexible but the Library provides resizing support out of the box and has compatibility with older browsers. I recommend trying out both before picking one as a starting point for your own scripts.

Walter's site has some other interesting CSS experiments, including an impressive graph generator and a library for dynamically rendering vector graphics.

This entry was posted on Wednesday, March 31st, 2004 at :01 AM, contains 214 words, and is filed under DHTML & CSS. you can follow any responses to this entry through the RSS 2.0 feed. you can leave a response, or trackback from your own site. the views and opinions in this blog post are those of its author.