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.
Related posts:
- Google Closure: How not to write JavaScript What if Google released a JavaScript library that sucked, and...
- Make a Mega Drop-Down Menu with jQuery Mega drop-down menus are cropping up all over the place,...
- BBC Glow – a New JavaScript Library The British Broadcasting Corporation has released a new open source...
- An Introduction to JavaScript for Acrobat I’m always interested to see how JavaScript works on non-browser...
- Server-side JavaScript Will Be as Common as PHP Despite the fact that JavaScript has been typecast as the...
I’ve been a fan of youngpup’s nice and clean dom-drag API and I’ve used to replace some old IE-only drag DHTML in one of my projects: http://www.starvingartist.stanleysy.com/projects/web/asc3/as6/
I’ve only recently seen Drag & Drop, but already, I’ve been tempted to switch due to the staggering amount of time-saving built-in methods (copy, hide, move, etc): http://www.walterzorn.com/dragdrop/api_e.htm
March 31st, 2004 at 5:23 am
I’ve found Aaron Boodman’s website to be a inspiration in many ways. He redisgned his website recently, though. And now I found it almost impossible to use, the navigation is really hard for me to use.
I love his ypslideoutmenus http://www.youngpup.net/2001/ypslideoutmenus, suceesfully implemented on several websites.
March 31st, 2004 at 8:46 am
Walter’s javascript vector graphics experiment reminds me of another good dhtml experiment — slayeroffice.com’s web paint: http://slayeroffice.com/tools/web_paint/
March 31st, 2004 at 10:27 am
I just visited youngpups site, havent been there for a while.. it seems to have reverted to a 1980s academic look… ie like a bare apche listing, yeuchhh… I thought his site used to look cool
March 31st, 2004 at 12:30 pm
I’ve seen demos of this type of code before, but I have yet to see a practical use for it. Do you have any good examples of this code being put to use?
March 31st, 2004 at 5:18 pm
The links to the Aaron Boodman’s DOM-Drag librarie are broken.
March 31st, 2004 at 5:41 pm
The links work fine for me.
Scott, I mentioned my main use for DOM-Drag in the entry: ordering interfaces. Unfortunately I can’t demonstrate the interfaces I’ve built as they’re all for intranet tools but I’ve used DOM-Drag as part of a photo gallery tool to let site updaters re-order the photos in the gallery by dragging their thumbnails relative to each other. It’s a lot more user friendly than other ordering interfaces I’ve experimented with in the past, which usually revolve around selecting a single item and moving it up and down relative to other items once click at a time.
March 31st, 2004 at 10:45 pm
Hi Simon,
The fact that *anyone* uses DOM-Drag for anything approaching a production system is staggering to me. That’s just because I never meant it more than maybe a cool little library to move elements around with on homepages and such.
Neat features like resizing and cropping could easily be added, but proabably won’t anytime soon.
And once again, I’m *sorry* that nobody likes the new design, but what can I say – I do. :)
April 8th, 2004 at 10:04 pm
I have a compromise between Walter’s and Aaron’s scripts.
Drag Module allows for relatively or absolutely positioned elements, so you can use it to make drag ‘n drop lists, trees, elements in table cells, et c.
You can implement your own onbeforedragstart to make a cloned copy, and there’s no resizing capability built in.
August 10th, 2004 at 4:43 pm
link: http://dhtmlkitchen.com/scripts/draglib/demo/
August 13th, 2004 at 5:27 pm
DHTML Kitchen library looks cool, but positioning elements just verticaly or horizontaly is a little bit limited. If you have litem list like pictures thumbnails, it would be better to position them with none constraints. For the bottom right to the upper left, for example.
October 3rd, 2004 at 1:25 pm
You can use any position you want. You can use:
* Relative positioning for normal flow,
* Absolute positioning.
* Any combination of relative or absolute positioning.
* Bottom/right values instead of top/left values.
* Margins.
* Positioned elements inside a table cell
* Positioned elements inside a floated element.
I tried to make it really flexible without too much complexity. It’s easy to do easy things and a little harder to do tricky things.
The key to using it successfully requires a solid understanding of CSS positioning, using CSS1 rendering mode (using a uri doctype), and using valid markup.
March 11th, 2005 at 2:01 pm
please any one help me I want to use ajax in drag and drop
can anyone tell me how to do that
I am using http://www.walterzorn.com/dragdrop/api_e.htm
for drag and drop
June 15th, 2005 at 4:29 am
Check http://sourceforge.net/projects/ddi/ – Drag’n'Drop Interface project.
June 22nd, 2005 at 11:04 am
I have added some functionality to Walters code, to allow for animated snapping back. Also I added a “drop target”.
Click here to see the code
December 7th, 2005 at 2:05 pm
Walter Zorn’s script seems nice but it has a major problem, I couldn’t solve yet, maybe someone can help.
If you have a static div, it works fine, but i’m changing innerHtml using ajax, and when the inside of the div, i want to drag/drop, the script doesn’t work
August 4th, 2006 at 5:33 pm
may i ask something? is there available when i drag an image or something like this in a webpage and drop it into a textarea of another page such as yahoomail, hotmail…etc?
September 8th, 2006 at 7:20 pm
I noticed a weird problem with Trope’s code posted above – every time you drag the “document”, the yellow border around the Trashcan image grows at the top and bottom. Just a little bug, I’m sure, but probably something you should check into :)
September 13th, 2006 at 6:24 am
but the image in Tropes,s drad and drop returns back after dropping. so it should be where it is only the image is copied and dropped and no backward move should be shown.
Can anybody help me.
October 16th, 2006 at 5:03 pm
I’m trying to use Walter’s superb DD library, but i have some browser’s starving/crashing (seems that the browser hangs in a infinite loop in some js function inside main .js file) problems in IE (version 6.0.2) while in Moz all works fine … ????? Anyone got this problem ? Please let me know …
October 27th, 2006 at 1:05 am
Mattia,
I’ve got the same problem with IE 6+7 — hanging/crashing — any resolution?
February 5th, 2007 at 2:50 pm
March 13th, 2007 at 4:48 pm
I love script.aculo.us’s drag and drop, Damn easy to plug in your code.
April 4th, 2007 at 4:31 pm
HI all ,
I have included one dragdrop script.
The page creates one table and drag and drop works fine in that page , however as per one need I created that table in that page via javascript ..
some thing like
html=”….” ;
document.getElementById(’table’).innerHTML = html;
But now the drag and drop is not working.
any suugestions will be highly appreciated.
thanks
vinay.145@gmail.com
May 11th, 2007 at 4:09 pm
HI all ,
I have included one dragdrop script.
The page creates one table and drag and drop works fine in that page , however as per one need I created that table in that page via javascript ..
some thing like
html=”….” ;
document.getElementById(’table’).innerHTML = html;
But now the drag and drop is not working.
any suugestions will be highly appreciated.
thanks
vinay.145@gmail.com
May 11th, 2007 at 6:44 pm
@vinay : You can; set the innerHTML of a table in IE ( it doen’t support it) You’ll hav to rebuild the table dynamicly i think.:(
@DHTML Kitchen: Great stuff at your site! The only comment I have is that non of the DHTML script are ‘gracefully degrading’ meaning that when the client brouwser does’t support javascript ( or has it switched off) the hole functionality of the site is gone. Now with pc/mac users the chance of this happening is not very big (6% jan 2007 source w3 ) but with the growing popularity of mobile devices it would be to bad to direct user to a site that doesn’t work :(
But anyways, looks very nice :D keep up the good work!
cheers
July 25th, 2007 at 8:59 am
Okay, i;m working on an on-line RPG Adventure game. I have been working endlessly to make it in a “nothing-but-AJAX” sort-of manner and successfully found a way to make it load seperate sections of the page to reduce server bandwidth, hence maximizing loading speeds.
As one of the feature I was wishing to have a drag/drop item implementation. One of the ideas I had had was to have the user make potions, and such, using drag/drop. So, if a user wants to make a potion he/she would drag the first ingredient to the pastel, then drag the “goop” to the flask, then repeat. How do I make a drag/drop element disapear when dragged over another element which would then be modified?
Please include as much information as possible. Also, if somebody would be interested in joining me on the project (making the game) please let me know. All I ask is that you be able to program in PHP and JS.
Thank you,
James
September 9th, 2008 at 4:58 pm
February 21st, 2009 at 5:21 pm