使用jquery draggable和droppable函数拖放文件夹

Question

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

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

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

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

以下是outlook.com的图片。文件夹结构如下所示：

我不想'移动收件箱，archieve，发送，删除文件夹。但是想要在这些项目下移动文件夹。就像从“已删除”到“已发送”中的“sdfsdf”文件夹一样。

如何实现这一目标。

Answer 1

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

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

Answer 2

这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时，它会将该项目附加到该列表中，该列表将从上一个列表中删除该项目。

Answer 3

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

例如：

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