JavaScript - - By Simon Willison

Drag and drop with Javascript

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 previously 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 performing 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.