How to disable drag and drop in JQuery Nestable list
I am trying to create a nested list using jquery nestable with drag and drop functionality that is disabled in the whole 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 can create a nested list and the user can change the nested list. I want this feature to be disabled, but I was unable to do it. Please advise.
source to share
I had a similar problem and fixed it with 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 switch classes drag_enabled
and drag_disabled
checkbox:
$('#list').nestable({maxDepth: 1});
$('#draggable_list').change(function(){
$('#list').toggleClass('drag_disabled drag_enabled');
});
source to share
There is the same problem. You just need to add these CSS codes
.drag_disabled{
pointer-events: none;
}
.drag_enabled{
pointer-events: all;
}
.dd-expand{
pointer-events: auto;
}
.dd-collapse{
pointer-events: auto;
}
And you add JavaScript to the footer
$('#nestable02').nestable({maxDepth: 1});
You disable all pointer events except reversal.
Hope this helps you
source to share