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

I was wondering what would be the best way to implement some k开发者_如何学Cind 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! :)

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?

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

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>

See the live example. More on Dojo DnD in DojoCampus.

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.

I'd recommend using html5 drag and drop, because even tho its a terrible api, it opens up a lot of possibilities, like moving your "windows" between browser tabs for example. I recently wrote a low-level drag-and-drop module that abstracts almost all of the bizarre weirdness from the html5 drag-and-drop api. All you'd need to do is create some absolutely positioned "windows" with some drag-handle and do something like this:

var startMouse, startWindow
dripDrop.drag(dragHandle, {
    dragImage: true, // default drag image
    start: function(setData, e) {
      setData('window', someWindowId)
      startMouse = {x:e.pageX, y:e.pageY}
      startWindow = {x: yourWindow.style.top, y: yourWindow.style.left}
    },
    move: function(position, e) {
      yourWindow.style.top = startWindow.x + (position.x-startMouse.x)
      yourWindow.style.left = startWindow.y + (position.x-startMouse.y)
    }
})
dripDrop.drop(myDropzone, {
    drop: function(data, pointer, e) {
        // maybe you want do do something on dropping a window in a particular place?
    }
})

Check out the module here: https://github.com/fresheneesz/drip-drop