Thursday, April 14th, 2005

Drag n’ Drop in JavaScript

Category: JavaScript

A lot of people ask about drag and drop, and here is a nice set of examples: Direct Manipulation Using JavaScript and CSS.

Direct manipulation, particularly drag and drop, is under utilized in desktop applications and is almost non-existant in web applications. The following examples demonstrate that direct manipulation is possible in modern browsers.

Each example is a proof of concept. I’m answering the question Can I do this? without considering the question Should I do this?. That said, some of these examples are pretty impressive, so it’s nice to think that sometimes the answer will be Yes, you should.


You can then combine these JavaScript functions with Ajax to make sure that the changes you made are persisted!

Posted by Dion Almaer at 8:29 am

3.4 rating from 28 votes


Comments feed

Cool stuff. One thing about the drag n drop lists. It seems like its all client side. How would this help in a real world situation where you need to store the new ordered lists that you just dragged and dropped? It doesn’t communicate with the server at anytime, so you can’t really save that information. Not sure how useful that would be.

I guess you can also set some hidden field values or use Ajax to communiate with the server. Now that would be a neat demo.

Comment by Ramin — April 14, 2005

What is the possibility of using nested UL lists with sorting? That is something that I would be very interested in.

Have you tried that at all?

Comment by David — April 14, 2005

Have you ever tried qooxdoo ( There is a full drag and drop implementation – but it’s target are web applications – not simple html pages.

Comment by Sebastian — April 15, 2005

I’m currently working on Drag&Drop for XHTML and SVG pages. In particular, I find your examples of sorting lists and slides very good (absolutely high drool factor). The code I wrote so far is able to handle mixed XHTML/SVG documents (compound documents). It can show a selection rectangle with resize handles, and it can be used to move and resize both XHTML and SVG elements, as long as they allow absolute positioning. The code hides differences in XHTML and SVG semantics.

However, currently one important thing for drag&drop is still missing: while it is now possible to handle the drag, it is not possible to detect whether a particular “thing” has been dropped onto a particular other element. Part of the problem is that there is no function to detect what is “under” the cursor and the object being dragged. I would like to see support for this coming from web browsers so writing cross-platform interactive web-applications could become a little more easier…

Comment by Harald Albrecht — April 18, 2005

Leave a comment

You must be logged in to post a comment.