digg

Facebook Connect Join Digg About

Anatomy of a Drag and Drop in JavaScript

snook.ca — A drag and drop essentially consists of a few events (and by events, I mean, moments in time, not DOM events). There's the moment a drag is started, there's the continuous dragging of an item, and finally there's the moment the item is no longer being dragged (ie: the drop). The items being dragged are sometimes referred to as draggables.

Who dugg this? Made popular Nov 21, 2006

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

9 Comments

show profanity settings
expand all
  • fiendlama, on 10/12/2007, -0/+5I appreciate the time it would take to analyze Mootools, Scriptaculous, and YUI's differences and similarities. In my job, someone who recommends and chooses technologies for their strengthes and weaknesses, this is valuable information. For future articles, I'd appreciate adding Dojo to the mix.
  • bigkm, on 10/12/2007, -5/+7from the description, anyone who has used a mouse would know that
  • natekoechley, on 10/12/2007, -0/+2After reading this article, be sure to look at the "Interesting Moments Storyboard" for drag and drop that the YUI team offers on their site. What should the cursor do when it's over a valid drop target? What should the drag-item's proxy do when it's over two valid drop targets? These are the exact types of questions the Storyboards will help you think about and answer:

    http://developer.yahoo.com/yui/dragdrop/#storyboard

    Thanks
    Nate

    (on the YUI team - but they're cool even if I wasn't!)
  • akkuma, on 10/12/2007, -0/+2Personally, I've found all these libraries to be awful for very flexible drag and drop. For instance, I am currently making something that allows you to select numerous 'objects' with ctrl/shift and then drag em all at once. If I wanted to do this in basically any library it would be a pain in the ass, as they handle it all.

    What they all seem to lack is the 'extreme' amount of flexibility I've come to need and the amount of code for drag and drop is not that hard to begin with. Why bother with a pigeon hole solution, when custom code can be made fast for non trivial events? On the other hand, you can screw around with their library making it incompatible for future updates or spend more time trying to figure out how to make what they give you work for your situation.
  • jonathansnook, on 10/12/2007, -0/+2Tell me about it. I put this together to help dispel some of the myth that drag and drop is complicated to pull off. After using a bunch of these libraries, I end up rewriting half of it to do what I need to do.
  • kidhero, on 10/12/2007, -0/+2all i know is he's on dreamhost and it's not a very good host for the digg effect
  • ephemerae, on 10/12/2007, -0/+1i like it.
  • jonathansnook, on 10/12/2007, -0/+1Yeah... I'm on DH and it'll be interesting to see if traffic comes to a screeching halt. I'm still seeing decent performance, which is nice.
  • acteon, on 10/12/2007, -0/+0Interesting read, although finding real-world examples was a little difficult. http://www.gamingtextures.com has a very good implementation of JavaScript dragging.

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.