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可拖拽/可嵌套列表排序

回答

相关问题