如何在 Jquery Nestable List 中禁用拖放答案

【问题标题】：how to disable drag and drop in Jquery Nestable List如何在 Jquery Nestable List 中禁用拖放
【发布时间】：2017-10-28 17:11:44
【问题描述】：

我正在尝试使用 jquery 可嵌套创建一个嵌套列表，并在整个列表中禁用拖动功能。下面是我的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')
            });
        });

目前，我能够创建嵌套列表，用户可以重新排列嵌套列表。我希望禁用该功能，但我无法做到。请指教。

【问题讨论】：

标签： jquery html user-interface jquery-nestable

【解决方案1】：

我遇到了类似的问题，并使用 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');
     });

【讨论】：

如果列表有嵌套元素，这将破坏可嵌套列表的展开/折叠
@MohamedSanaulla 是正确的，但您可以简单地重新启用这些操作，例如 [data-action="collapse"] {pointer-events: all;}

【解决方案2】：

我已经浏览了 js 文件，并发现使用类“dd-handle”进行拖放处理。

因此，如果您更改句柄类名称，那么它将像魅力一样工作。

        $('.nestable').nestable({handleClass:'123'});

完成

【讨论】：

【解决方案3】：

你可以设置 maxDepth: 0 这不会禁用拖放，但不会阻止 obj 重定位

【讨论】：

将 maxDepth 设置为零实际上不会阻止 obj 重定位。它可以防止将对象从父状态重新定位到子状态。但是，从子级重新定位到父级仍然有效。

【解决方案4】：

有同样的问题。你只需要添加这些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});

您禁用了除折叠之外的所有指针事件。

【讨论】：