jQuery seleccionable y arrastrable para crear una ventana similar al Explorador de Windows

Question

Ahora me enfrento a otra cosa que no sé cómo hacer.

Soy nuevo en jQuery y estoy tratando de hacer que un icono se pueda arrastrar y cuando lo suelte en la carpeta (.folder div) Se moverá allí.

1. arrastrar el icono (sé cómo arrastrar, pero que sólo es visible en el div padre y no en toda la página web.)
2. gota en una carpeta en el #navbar (a la izquierda) (una vez más, no puedo encontrar la manera de que sea aplicable en gotas más de un div específica)
3. Retire el div se movió sobre el contenido original y vuelva a alinear todos los demás div
4. llamada una página php para mover el archivo asociado a este div para el directorio seleccionado

div en el centro de la página (quiero que se puedan arrastrar) son iconos, cuando los arrastra y los suelta en una carpeta de la izquierda, se moverán allí.

Aquí se puede ver cómo se ve (mejor usando Firefox): http://narks.xtreemhost.com/

Ésta es sólo una página de prueba para mostrarle. ¿Alguien puede ayudarme con eso, por favor?

conocer la estructura de la página web, ver Windows 7 explorer in CSS layout (Gracias de nuevo a Ivan Ivanić por su preciosa help1)

EDITAR jQuery Arrastre & 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

lo recomiendo mucho jqueryui . Demos aquí: http://jqueryui.com/demos/. Tenga en cuenta el enlace a sus objetos seleccionables y arrastrables.

Además, a partir de un análisis rápido de sus problemas, parece que una solución más específica sería la Clasificable, que me encanta. Aquí está la lista de dos listas con lista de entremezclas: http://jqueryui.com/demos/sortable/#connect-lists

Actualización: También indica que debe dejar el div que contiene y tal. Aquí está la página específica sobre los límites para arrastrables: http://jqueryui.com/demos/draggable/#constrain-movement. Y, en general, tenga en cuenta los enlaces a diferentes ejemplos en la barra lateral derecha para cada una de las funciones de jQueryUI. Ellos representan todo lo que está disponible de manera inmediata. Si necesita ir más allá, envíe su implementación a la gente de jqueryUI. Quién sabe, podría convertirse en la próxima característica de la próxima versión de jqueryUI.