how to disable drag and drop in Jquery Nestable List

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