可选择和可拖动的jQuery,以创建类似Windows资源管理器的窗口

Question

我现在面临着另一件我无法弄清楚如何做的事情.

我是jQuery的新手,我正在尝试使图标可拖动,当你将它放入文件夹(.folder div)时,它将被移动到那里.

1. 拖动图标(我知道如何拖动它,但它只在父div中可见,而不是在整个网页上.)
2. 放在#navbar上的一个文件夹(左侧)(再次,我无法弄清楚如何使它在特定div上可以放置)
3. 删除原始内容上移动的div并重新对齐所有其他div
4. 调用php页面将与此div关联的文件移动到所选目录

页面中心的div(我希望它们可拖动)是图标,当您拖动它们然后将它们放在左侧的文件夹上时,它将被移动到那里.

在这里你可以看到它的样子(使用Firefox更好):http://narks.xtreemhost.com/

这只是一个向您展示的测试页面.有人可以帮帮我吗？

要了解网页的结构,请参阅CSS布局中的Windows 7资源管理器(再次感谢IvanIvanić的宝贵帮助1)

编辑jQuery拖放:

$( "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

我强烈推荐jqueryui。演示在这里： http: //jqueryui.com/demos/。请注意其 Selectable 和 Draggable 对象的链接。

此外，从对您的问题的快速扫描来看，似乎更具体的解决方案是我喜欢的可排序。这是带有列表混合的两个列表可排序：http://jqueryui.com/demos/sortable/#connect-lists

更新：您还声明您需要保留包含的 div 等。以下是关于可拖动边界的特定页面： http://jqueryui.com/demos/draggable/#constrain-movement。一般来说，请注意右侧边栏上每个 jQueryUI 功能的不同示例的链接。它们代表了开箱即用的所有内容。如果您需要超越，请将您的实现发送给 jqueryUI 人员。谁知道呢，它可能会成为下一版本 jqueryUI 的下一个功能。