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

Posted 2023-05-08

【中文标题】可选择和可拖动的 jQuery 以创建类似 Windows 资源管理器的窗口

【英文标题】：Selectable & Draggable jQuery to make a Windows Explorer-like window

【发布时间】：2011-05-26 20:20:53

【问题描述】：

我现在正面临另一件我不知道该怎么做的事情。

我是 jQuery 新手，我正在尝试制作一个可拖动的图标，当您将其放入文件夹（.folder div）时，它将被移动到那里。

拖动图标 （我知道如何拖动它，但它只在父 div 中可见，而不是在整个网页上。） 拖放到#navbar 上的文件夹（在左侧） （再说一次，我不知道如何让它在特定的 div 上可放置） 移除在原始内容上移动的 div 并重新对齐所有其他 div 调用一个php页面将这个div关联的文件移动到选中的目录

页面中心的div（我希望它们可拖动）是图标，当您将它们拖放到左侧的文件夹中时，它将被移动到那里。

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

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

要了解网页的结构，请参阅Windows 7 explorer in CSS layout（再次感谢 Ivan Ivanić 的宝贵帮助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) 
    
);

【参考方案1】：

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

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

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

【讨论】：

是的，我已经为此使用了 jquery（请参阅上面更新的原始帖子）

您也在使用 jQueryUI，一个独特且独立的“库”。这很好。