Selectable & Draggable jQuery to make a Windows Explorer-like window

Question

I'm now facing another thing that I can't figure out how to do.

I'm new to jQuery and I'm trying to make an icon draggable and when you drop it in the folder(.folder div) It will be moved there.

1. Drag the icon (I know how to drag it but it is only visible in the parent div and not on the entire webpage.)
2. Drop on a folder on the #navbar (at the left) (Again, I can't figure out how to make it droppable over a specific div)
3. Remove the div moved on the original content and realign all other div
4. Call a php page to move the file associated with this div to the selected directory

div on the center of the page (I want them draggable) are icons, when you drag them and then drop them on a folder on the left, it will be moved there.

Here you can see what it looks like (Better using Firefox) : http://narks.xtreemhost.com/

This is only a test page to show you. Anyone can help me with that please?

To know the structure of the webpage, see Windows 7 explorer in CSS layout (Thanks again to Ivan Ivanić for his precious help1)

EDIT jQuery Drag & Drop :

$( "div.explorer_icon" ).draggable({
    opacity: 0.50,
    revert: true,
    distance: 30,
    zIndex: 9999,
    scroll: false,
    appendTo: 'body',
    containment: 'window',
    helper: 'clone'
});
$( "#navbar div.item_list" ).droppable({
    accept: '.explorer_icon',
    hoverClass: 'item_list_hover',
    tolerance: 'pointer',
    drop: function(event, ui) {
    }
});

Answer 1

I'd highly recommend jqueryui. Demos here: http://jqueryui.com/demos/. Note the link to their Selectable and Draggable objects.

Additionally, from a quick scan of your problems, it looks like a more specific solution would be the Sortable, which I love. Here's the two-list sortable with list interminglings: http://jqueryui.com/demos/sortable/#connect-lists

Update: You also state that you need to leave the containing div and such. Here is the specific page on boundaries for draggable: http://jqueryui.com/demos/draggable/#constrain-movement. And in general, note the links to different examples on the right sidebar for each of the jQueryUI features. They represent everything that is available out of the box. If you need to go above and beyond, please send your implementation to the jqueryUI folks. Who knows, it might become the next feature of the next version of jqueryUI.