使用jQuery拖放功能拖放文件夹

我正在尝试用户可拖动和拖放功能。我有这么多的文件夹，并希望将文件夹移动到另一个文件夹，如在outlook.com中。的所有文件夹在li元素等的形式：我已经使用以下代码来拖放使用jQuery拖放功能拖放文件夹

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

。当做drap和drop时，li元素的位置不会移动，而是添加顶部和左侧的样式。我想删除li元素，并添加到目标元素的地方。

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

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

enter image description here

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

这是如何实现的。

来源

2013-10-03 Cindrella

看看这个LNK：http://stackoverflow.com/questions/1324044/how-to-disable-jquery-ui-draggable – krish

这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-03 10:32:23 Nunners

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

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

来源

2013-10-03 10:23:02 krish

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

例如：

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

来源

2013-10-03 10:32:56 Chokchai

使用jQuery拖放功能拖放文件夹

回答

相关问题