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

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

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

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

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

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

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

要了解网页的结构,请参阅Windows 7 explorer in CSS layout(再次感谢IvanIvanić的宝贵帮助1)

编辑jQuery Drag&掉落：

$( "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) {
    }
});

最佳答案

我强烈推荐jqueryui.演示：http://jqueryui.com/demos/.请注意其可选和可拖动对象的链接.

此外,通过快速扫描您的问题,看起来更具体的解决方案是Sortable,我喜欢.这是列表混合的两个列表可排序：http://jqueryui.com/demos/sortable/#connect-lists

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

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

相关文章