使用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拖放功能拖放文件夾

回答

相關問題