Im trying to created a nested list using jquery nestable with drag feature disable throughout the list. Below is my 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>
My script looks like below::
$('.dd').each(function(){
$(this).nestable({
maxDepth: 1,
group: $(this).prop('id')
});
});
At the moment, im able to create nested list and user can rearrange the nested list. I want that feature to disabled but im not able to do it. Please advise.
I had a similar problem, and fixed it by using 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 (just toggle classes drag_enabled
and drag_disabled
on checkbox:
$('#list').nestable({maxDepth: 1});
$('#draggable_list').change(function(){
$('#list').toggleClass('drag_disabled drag_enabled');
});
I have gone through the js file and I strike that the drag-drop handling with class "dd-handle".
So if you change the handle class name then it will work like charm.
$('.nestable').nestable({handleClass:'123'});
Done
You can set maxDepth: 0 This will not disable drag and drop, but do not prevent the obj relocation
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With