我正在尝试使用 jquery nestable 创建嵌套列表,并在整个列表中禁用拖动功能。 下面是我的 html。
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item" id="no-drag">
<div class="dd-handle">
Foo
<div class="pull-right action-buttons">
<a class="blue" href="#">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
<a class="red" href="#">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
</div>
</div>
<ol class="dd-list">
<li class="dd-item" id="no-drag">
<div class="dd-handle">
Bar
<div class="pull-right action-buttons">
<a class="blue" href="#">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
<a class="red" href="#">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
</div>
</div>
<ol class="dd-list">
<li class="dd-item" id="no-drag">
<div class="dd-handle">
Baz
<div class="pull-right action-buttons">
<a class="blue" href="#">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
<a class="red" href="#">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
</div>
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
我的脚本如下所示:
$('.dd').each(function(){
$(this).nestable({
maxDepth: 1,
group: $(this).prop('id')
});
});
目前,无法创建嵌套列表,用户可以重新排列嵌套列表。我希望禁用该功能,但我做不到。请指教。
最佳答案
我遇到了类似的问题,并通过使用 CSS pointer-events
修复了它。
CSS:
.drag_disabled{
pointer-events: none;
}
.drag_enabled{
pointer-events: all;
}
HTML:
<label class=""><input id="draggable_list" class="" name="draggable_list" type="checkbox" value="false"> <span>Activate Ordering </span></label>
<div id="list" class="drag_disabled dd">
<ol class="dd-list">
<li class="dd-item" data-id="Item 1">
<div class="dd-handle dd-outline dd-anim">
Text 1
</div>
</div>
</li>
<li class="dd-item" data-id="Item 3">
<div class="dd-handle dd-outline dd-anim">
Text 2
</div>
</li>
</ol>
</div>
JavaScript(只需在复选框上切换类 drag_enabled
和 drag_disabled
:
$('#list').nestable({maxDepth: 1});
$('#draggable_list').change(function(){
$('#list').toggleClass('drag_disabled drag_enabled');
});
关于jquery - 如何在 Jquery 嵌套列表中禁用拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44224764/