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

Question

Hello,

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

http://mochaui.com/
http://www.extjs.com/

also this is a question that can give you ideas http://stackoverflow.com/questions/295123/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.

Answer 3

The Dojo Toolkit provides an easy way to define DnD elements.

<div dojoType="dojo.dnd.Source" class="container">
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Epsilon</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Zeta</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Eta</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Theta</strong></div>
</div>

No JavaScript magic needed. See the live example. More on Dojo DnD in DojoCampus.

Answer 4

The manner you described sounds like a good way to implement this yes. I don't know if there are different approaches. I implemented something similar on a previous site (www.ponyhof.be) although there's no droppable implementation. You're welcome to take a look at the code, it's not really a beauty but it works.

On this site I made one main page with an empty info panel (draggable) where I loaded info via Ajax.

Since I made this site I learned some things that would have eased the implementation (so now I would make it differently). More specific, I would make better use of the jQuery's delegate-method which can automatically attach actions to links which are loaded via ajax (on ponyhof.be I attached them after ajaxComplete event was fired).

But in general I think what you propose sounds like a good way of building such an interface and I didn't come across something better.