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.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • starvingartist

    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

  • http://www.domedia.org/ junjun

    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.

  • John

    Walter’s javascript vector graphics experiment reminds me of another good dhtml experiment — slayeroffice.com’s web paint: http://slayeroffice.com/tools/web_paint/

  • Jim

    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

  • http://speed.insane.com/ scottj

    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?

  • Bobul

    The links to the Aaron Boodman’s DOM-Drag librarie are broken.

  • http://simon.incutio.com/ Skunk

    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.

  • Aaron

    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. :)

  • DHTML Kitchen

    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.

  • DHTML Kitchen
  • Michelange

    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.

  • DHTML Kitchen

    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.

  • priyanka

    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

  • WingedFox

    Check http://sourceforge.net/projects/ddi/ – Drag’n’Drop Interface project.

  • Trope

    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

  • swosmius

    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

  • kallang

    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?

  • Justin

    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 :)

  • Anonymous

    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.

  • Mattia

    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 …

  • Scott

    Mattia,

    I’ve got the same problem with IE 6+7 — hanging/crashing — any resolution?

  • Anonymous



  • designcode

    I love script.aculo.us’s drag and drop, Damn easy to plug in your code.

  • hi

    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

  • vinay

    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

  • MisterB

    @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

  • James

    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

  • Anonymous