[英]jQuery dragable / sortable with nested list
I have a page that contains a source list and three possible drop zones for the user to move an item to. 我有一个页面,其中包含一个源列表和三个可能的放置区域,供用户将项目移动到其中。 Due to the source list growing in length, I want to break down the
<li>
's into categories to make it more readable. 由于源列表的长度越来越大,我想将
<li>
分解为几类,以使其更具可读性。
When doing so, my code is still applying the dragable to these nested <ul>
items when I only want it to be the <li>
itself. 这样做时,当我只希望它成为
<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>
This is how I have my lists set up. 这就是我设置列表的方式。
$('#in_available_fields').sortable({
connectWith: '.sortable-list',
placeholder: 'placeholder',
start: function(event, ui) {
........
Is there any easy way to have this nested setup, only allowing <li>
items to be moved? 有什么简单的方法可以进行此嵌套设置,只允许移动
<li>
项目? Will it be more involved for the code to then have to know what <ul>
it belongs to so it goes back there if dropped back into the source? 然后,是否需要更多的代码才能知道该代码属于哪个
<ul>
,以便将其放回源代码中而又回到那里?
Just looking for some tips incase this is already part of a method/event for sortable/draggable that I am not aware of. 只是寻找一些提示,以防万一这已经是我不知道的可排序/可拖动方法/事件的一部分。
Fiddle: https://jsfiddle.net/d4Lf9v4o/1/ 小提琴: https : //jsfiddle.net/d4Lf9v4o/1/
I make a simple example for let you understand the solution. 我举一个简单的例子,让您了解解决方案。
In Jquery UI sortable you can use a class for exclude that item from the sortable. 在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>
Hope that help you. 希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.