我试图使用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')
});
});
目前,我能够创建嵌套列表,用户可以重新排列嵌套列表。我想要禁用该功能,但我无法做到这一点。请指教。
答案 0 :(得分:4)
我遇到了类似的问题,并使用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');
});
答案 1 :(得分:2)
我已经浏览了js文件,并且使用类&#34; dd-handle&#34;进行了拖放处理。
因此,如果您更改句柄类名称,那么它将像魅力一样工作。
$('.nestable').nestable({handleClass:'123'});
完成
答案 2 :(得分:1)
您可以设置maxDepth:0 这不会禁用拖放,但不会阻止obj重定位
答案 3 :(得分:0)
有同样的问题。您只需要添加这些CSS代码
.drag_disabled{
pointer-events: none;
}
.drag_enabled{
pointer-events: all;
}
.dd-expand{
pointer-events: auto;
}
.dd-collapse{
pointer-events: auto;
}
然后在页脚中添加javascript
$('#nestable02').nestable({maxDepth: 1});
您禁用除折叠之外的所有指针事件。
希望它对您有帮助