unfortunately this method doesn't work for iframes to be embedded widthin the divs to make them draggable.
has anyone tried this using prototype library? a non-prototype solution for this problem can be found here

Muneeb said on November 20, 2006

Great Article !

I would be obliged if you can discuss how to implement draggable structures like we have in netvibes.com (you see the drag only happens in specified columns & overlapping is not allowed thus if i want to put C div in between A div and B div ...then B automatically moves down opening up space for C div)

I have been trying to implement it using Yahoo! library but have struggled so far.

Overall great stuff :)

Brent Traut said on November 21, 2006

I've been working on my own drag and drop code for an upcoming project and I see that you have a similar problem in your example -- when you drag a page element, it selects text as if you clicked and dragged across a static paragraph of text. Is there a decent way to prevent this? Google Calendars doesn't seem to do it in their model.

Nikhil said on November 21, 2006

Thanks for the nice analysis!
I am implementing a custom library for a project of mine since this will be my first touch with dom scripting. I don't want to use prepackaged code as it will curb my learning. So this will definitely help

Jonathan Snook said on November 21, 2006

schello: although I haven't tried it, I imagine it wouldn't be too difficult. The key would be to write a pass-through function to handle events from the iframe.

Muneeb: I'll definitely get into more of that in the upcoming article. Thanks. :)

Brent: There's an easy way to prevent that. If the drag function is attached via an element.onmousedown event, just put return false; at the end of the function. I've updated the drag and drop example to demonstrate. If you attach via addEventListener then use event.preventDefault().

Nate Koechley said on November 21, 2006

Hey Jonathan,

On the YUI team we've been using the term "Interesting Moments" to help think about the key events in time in complex interactions such as Drag and Drop and AutoComplete. In a collaborative process with our User Experience Designers and our YUI Engineers, we've created storyboards of the interesting moments that the large numbers of new "Actors" (e.g., "valid drop target", "intertion bar", "tooltip") encounter as they cross time and stage.

The result is an "Interesting Moments Storyboard" which we offer as part of YUI to help implementers think through these more complex interactions in a thorough and rational way.

Here in the Interesting Moments Storyboard for Drag and Drop:

Here's the storyboard for AutoComplete:

My colleague Bill Scott has blogged on the topic a bit too:

I also wanted to offer a bit more information about "drag handles". In addition to YUI's support for multiple drag handles, it also supports specifying what's /not/ a drag handle. This is useful when you want to say "the entire title bar is a drag handle /except/ the close button img and the headline link." This is accomplished with three methods in the library:


You can read more about those methods in our API documentation:

I'd happy to see you digging deep into these libraries - you're performing a great service for the community. Thanks again for a great article.


Nate Koechley
natek at yahoo-inc dot com
Engineer and Designer,
Yahoo! YUI Team

Bluedog said on November 21, 2006

Nice comparison. We've saved it to share with the TekTag community. Lots of interest in this kind of stuff.

Muneeb said on November 23, 2006

One more Snook,
Don't you have an RSS Feed for the blog? I tried to find it but could'nt.

Jonathan Snook said on November 23, 2006

Muneeb: the RSS feed is located in the bottom right hand corner of the page.

Cole Mickens said on November 23, 2006


Its also (on any modern browser) sitting in the URL bar or at the bottom-right hand of the screen OR ... at the very least it should be listed in the HTML

(just for future reference ;))

Muneeb said on November 23, 2006

[b]Cole Mickens[/b]:
Does IE 6.0.2900.2180 count as a modern browser? :D

Just Kidding. Thanx for the tip because I just opened it in Firefox and saw the icon :)

Dan said on November 28, 2006

Very interesting!

Gorky said on December 27, 2006

Thanks, it is really good!

Ronald said on December 27, 2006

Thanks so much for the drag and drop anatomy article!
I've done this many times for non-web (windows c#) applications, and now I see the similarities,
but your article helped me a lot for the javascript variant!

Thanks again!
The Netherlands

Gilson said on March 16, 2007

Onde est?? o Codigo do DRAG DROP com IFRAME

Till said on March 19, 2007

Very interesting article!! But I was actually looking for another feature: Dragging objects from outside the browser into a page. For example dragging a file from the file explorer into a web page so it uploads it.... Do u have a hint for that?

Everyone said on March 21, 2007


If you move the mouse too fast..
the drag is "dropped" mistakenly.

hacker not cracker said on March 21, 2007

Great Article. I'm going to try to implement it on my website but I first want to know if this "drag and drop" method is W3 compliant or at least compatible with IE 5 and Mozilla 1.0. I know a lot of new, nifty, cutting-edge web tricks are not yet "standard" yet and I just want to make sure. :)

Jonathan Snook said on March 21, 2007

@fatpublisher: the problem is that at times the mouse will be over the other two draggable elements in the middle of the drag, freezing the animation. I'd probably look at ways for events to stop being captured on those elements while in the drag.

@hacker: these techniques *could* be made to work with older browsers but I haven't bothered to test. It's mostly DOM method compliancy.

Mike Foster said on April 22, 2007

Another draggable/resizeable iframe demo:

great article btw :-)

jacobfogg said on May 01, 2007

Great looking site! I love the way you have employed elements that visually jump out of the container (i.e. your flags) as well as your color schemes (particularly the stylizations of graphical elements and the way your comment numbers bleed into the banner strip below it... Well done! =)

Only thing though, how do I navigate to the next installment of this article?

Blake said on May 05, 2007

Hi, I was wondering if you could help me set up my own javascript focus thing like you have on this comment form.

For instance... When you first look at the field 'name' its value is 'Name' but when you click in the field its value goes blank, yet if you keep it blank and click somewhere else the original value returns...

I would greatly appreciate your help on this as I would like to integrate this sweet feature into my own input box.


Paul M. Watson said on June 13, 2007

Nice article Snook. Did you get around to writing the second article on what muneeb requested?

paul said on September 17, 2008

Old, but very fast. Have you any more articles around this?

paul said on September 17, 2008

To Blake: read this : Autopopulating text input fields with JavaScript

Jonathan Snook said on September 17, 2008

I should have properly linked this up but this was the follow-up: Determining the Droppable

Philippe Rath?? said on October 10, 2008

When attaching a mousemove event to the document, the event object target's element that fireup the mousemove is different in Firefox than in IE and Safari.

In fact in Firefox it is the element under the absolute element that follow the mouse (the draggable) and in IE and Safari, it is always the element directly under the cursor which is the draggable element (which is a better behavior I think).

But how can I have access to the element under the element under the cursor?

I use no plugin.


Cato said on January 16, 2009

Could you help me. The greatest thing in the world is to know how to belong to oneself.
I am from Iran and learning to write in English, please tell me whether I wrote the following sentence: "The book I write appears on the album music from the motion picture stranger than fiction."

With respect :), Cato.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.