Question

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

执行此操作时，我的代码仍在将可拖动应用于这些嵌套的<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/

Answer 1

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

在Jquery UI可排序中，您可以使用类来排除可排序项中的该项。

＆＃13;

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

＆＃13;

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

＆＃13;

希望能帮助你。

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

1 个答案: