jQuery可拖拽/可嵌套列表排序

我有一個頁面，其中包含一個源列表和三個可能的放置區域供用戶移動項目。由於源列表的長度不斷增加，我想將<li>分爲幾類，以使其更具可讀性。jQuery可拖拽/可嵌套列表排序

當我這樣做時，我的代碼仍然將這個可拖動的元素應用到這些嵌套的<ul>項目，我只希望它是<li>本身。

<ul id="in_available_fields" name="in_available_fields" class="sortable-list fixed-panel ui-sortable"> 
<ul> 
    <li>Some Category Name</li> 
    <li class="sortable-item allowPrimary allowSecondary allowExport" data-fid="2">Tool Name</li> 
</ul>  
<li class="sortable-item allowSecondary allowExport" data-fid="3">Tool Description</li> 
<li class="sortable-item allowPrimary allowSecondary allowExport" data-fid="4">Tool Type</li> 
</ul>

這就是我如何設置我的列表。

$('#in_available_fields').sortable({ 
    connectWith: '.sortable-list', 
    placeholder: 'placeholder', 
    start: function(event, ui) { 
........

有沒有簡單的方法來有這樣的嵌套設置，只允許被移動<li>項目？它會更多地參與代碼，然後必須知道它屬於什麼<ul>，所以它回到那裏，如果放回源？

只是尋找一些提示，這已經是我不知道的可排序/可拖動的方法/事件的一部分。

小提琴：https://jsfiddle.net/d4Lf9v4o/1/

來源

2016-09-22 SBB

我做一個簡單的例子，爲讓你百思不得其解。

在jquery界面排序你可以使用一個類來排除可排序的項目。

$(function() { 
 
    $(".sortable").sortable(); 
 
    $(".sortable").disableSelection(); 
 
    $('.sortable').sortable({ cancel: '.cat' }); 
 
});

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> 
 

 
<ul class="sortable"> 
 
    <p class="cat">This is the category</p> 
 
    <li id="item_3">Item 3</li> 
 
    <li id="item_4">Item 4</li> 
 
    <li id="item_5">Item 5</li> 
 
</ul>

希望能夠幫助您。

來源

2016-09-22 00:25:02

jQuery可拖拽/可嵌套列表排序

回答

相關問題