How to implement "drag n drop" user interface on website?

Question

I was wondering what would be the best way to implement some kind of "drag n drop" user interface?

What i mean is that there would be one main page and every link click (eg. other sections like about, gallery, contact form) would open a new drag n drop element on top of that main page. Something like windows desktop where you can move your application windows around the screen.

Would it be best to call different functions with AJAX when a link is clicked? Like "gallery" link would call gallery-function and retrieve dynamically generated contents of that "window" with AJAX call and then just load that stuff on some div? Or would some other type of approach suit better for this?

I hope I was able to explain this clearly enough. I'm looking for a proper "design pattern" to implement this. All suggestions are wellcome! :)

Answer 1

I first suggest to use jQuery for create your drag and drop
http://jqueryui.com/demos/draggable/

I am sure that you can find many drag and drop examples for jQuery

I have use yahoo javascript library drag and drop - before learn jQuery. Here are some example on yahoo. http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html

Hope this help for start.

There are also all ready existing almost full systems ui on internet. Here is one http://www.smartclient.com/, but there are more....

https://github.com/mui/mochaui
http://www.extjs.com/

also this is a question that can give you ideas What is a good Very-High level UI framework for JavaScript?

Answer 2

HTML 5.0 offers drag and drop built in, but you will probably need to use Draggable and Droppable from the jQuery UI library.