5

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

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

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

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

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

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

要了解网页的结构，请参阅CSS 布局中的 Windows 7 资源管理器（再次感谢 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) {
    }
});
4

1 回答 1

4

我强烈推荐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 下一个版本的下一个特性。

于 2010-12-16T22:46:13.430 回答