使用jquery可拖放功能拖放文件夹答案

【问题标题】：Drag and drop folders using jquery draggable and droppable functions使用jquery可拖放功能拖放文件夹
【发布时间】：2013-10-03 10:01:53
【问题描述】：

我正在尝试使用可拖动和可放置的功能。我有这么多文件夹，想将文件夹从一个文件夹移动到另一个文件夹，就像在 Outlook.com 中一样。所有文件夹都采用 li 元素的形式，例如：

<div id="test">
  <ul>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
  </ul>
</div>

我使用下面的代码进行拖放。在进行拖放时，li 元素的位置不会移动，而是添加了样式顶部和左侧。我想删除 li 元素并在放置的目标元素处添加。

     $('#test ul li').draggable({
      cursor: 'move'          
    });
    $('#test ul li').droppable({});

下面是来自 outlook.com 的图片。文件夹结构如下：

我不想移动收件箱、归档、发送、删除的文件夹。但想移动这些项目下的文件夹。就像“sdfsdf”文件夹从已删除到已发送。

如何实现。

【问题讨论】：

查看这个 lnk：stackoverflow.com/questions/1324044/…

标签： jquery jquery-ui

【解决方案1】：

这个JSFiddle 应该是你要找的。它实现了一个非常基本的拖放功能，不包括顶级列表项。

它使用以下代码：

$(document).ready(function() {
    $('#test ul li ul li').draggable({
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: 'move'          
    });
    $("#test ul li ul").droppable({
      hoverClass: "droppable-hover",
      activeClass: "ui-state-highlight",
      drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.appendTo($(this));
      }
    });
});

此代码使所有子项目都可拖动，所有子列表都可拖放，但它忽略了初始级别项目。当您将项目拖到新的UL 时，它会将项目附加到该列表中，这会将其从上一个列表中删除。

【讨论】：

【解决方案2】：

使用“disable”方法禁用特定元素的拖动选项

$( ".selector" ).draggable( "disable" );

【讨论】：

【解决方案3】：

你可以过滤掉你不想要的元素。

例如：

// select only sub list
$('#test ul li li').draggable();
$('#test ul li li').dropable();

【讨论】：