how to disable drag and drop in Jquery Nestable List

Question

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.

score 5 · Accepted Answer · answered Oct 26 '17 at 12:26

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');
     });

This will break the expand/collapse of the nestable list if the list has nested elements — MohamedSanaulla, Dec 11 '17 at 08:42
@MohamedSanaulla is correct but you can simply re-enable those actions like this `[data-action="collapse"] {pointer-events: all;}` — sousdev, Apr 08 '18 at 17:03

score 5 · Answer 2 · answered Apr 27 '18 at 11:25

5

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

answered Apr 27 '18 at 11:25

Amul

149
1
3

score 1 · Answer 3 · answered Jul 05 '17 at 10:19

1

You can set maxDepth: 0 This will not disable drag and drop, but do not prevent the obj relocation

answered Jul 05 '17 at 10:19

HuckFin.7b

325
4
13

1

Setting maxDepth to zero does not actually prevent the obj relocation. It prevents re-location object from parent to the child state. However, re-locating from child to parent is still valid. – Fatih TAN Feb 26 '19 at 12:39

score 0 · Answer 4 · edited Oct 19 '20 at 16:25

0

Have 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 the javascript in footer

$('#nestable02').nestable({maxDepth: 1});

You disable all pointer-events excepted the collapse.

edited Oct 19 '20 at 16:25

SecretAgentMan

2,856
7
21
41

answered Sep 24 '19 at 21:21

Pierre Alexandre

219
1
5

how to disable drag and drop in Jquery Nestable List

4 Answers4