1

我正在尝试用户可拖动和可放置的功能。我有这么多文件夹，想将文件夹从一个文件夹移动到另一个文件夹，就像在 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”文件夹。

如何做到这一点。

4

3 回答 3

0

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

$( ".selector" ).draggable( "disable" );
于 2013-10-03T10:23:02.080 回答
0

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

于 2013-10-03T10:32:23.783 回答
0

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

例如：

// select only sub list
$('#test ul li li').draggable();
$('#test ul li li').dropable();
于 2013-10-03T10:32:56.710 回答