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

Question

我有一个页面，其中包含一个源列表和三个可能的放置区域，供用户将项目移动到其中。 由于源列表的长度越来越大，我想将<li>分解为几类，以使其更具可读性。

这样做时，当我只希望它成为<li>本身时，我的代码仍将可拖动对象应用于这些嵌套的<ul>项目。

<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/

Answer 1

我举一个简单的例子，让您了解解决方案。

在Jquery UI可排序中，您可以使用一个类将该项目从可排序中排除。

 $(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> 

希望对您有所帮助。