Nestable list - 禁止将子项移出父元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Nestable list - 禁止将子项移出父元素相关的知识,希望对你有一定的参考价值。

我的列表允许从子项移出子项,我想更改它。

enter image description here

如您所见,应允许将子项从父项内部移动到另一项父项,但不应允许在子项之外移动子项。

我认为代码太长了,所以这里是可嵌套列表,类似于我使用的nestableList from Luna theme,这里是脚本jquery.nestable.js

答案

注意1在阅读本答案之前参考other的答案,它确实很有用并帮助了我很多。注2,作为答案说,original library的作者,该库完全死了。但是有人负责继续开发这个图书馆,这里是new library 注3,即使新库也不支持拒绝规则,您仍然需要使用库的拉取请求。

我完全是提问者的相同案例(那是什么让我到达这里)。这是我如何解决我的问题(我希望这将有助于其他人)

回答

html

<div class="dd" id="nestable-example">
    <ol class="dd-list">

        <li class="dd-item" data-id="0" data-type="root">
            <div class="dd-handle">Root 0</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="1" data-type="child">
                    <div class="dd-handle">Child 1</div>
                </li>
                <li class="dd-item" data-id="2" data-type="child">
                    <div class="dd-handle">Child 2</div>
                </li>
                <li class="dd-item" data-id="3" data-type="child">
                    <div class="dd-handle">Child 2</div>
                </li>
            </ol>
        </li>

        <li class="dd-item" data-id="4" data-type="root">
            <div class="dd-handle">Root 4</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="5" data-type="child">
                    <div class="dd-handle">Child 5</div>
                </li>
                <li class="dd-item" data-id="6" data-type="child">
                    <div class="dd-handle">Child 6</div>
                </li>
            </ol>
        </li>

    </ol>
</div>

javascript

$('#nestable-example').nestable({
    group: 'categories', // you can change this name as you like
    maxDepth: 2,   // this is important if you have the same case of the question
    reject: [{
        rule: function () {
            // The this object refers to dragRootEl i.e. the dragged element.
            // The drag action is cancelled if this function returns true
            var ils = $(this).find('>ol.dd-list > li.dd-item');
            for (var i = 0; i < ils.length; i++) {
                var datatype = $(ils[i]).data('type');
                if (datatype === 'child')
                    return true;
            }
            return false;
        },
        action: function (nestable) {
            // This optional function defines what to do when such a rule applies. The this object still refers to the dragged element,
            // and nestable is, well, the nestable root element
            alert('Can not move this item to the root');
        }
    }]
});
另一答案

在您提供的示例中,使用的jQuery插件是Nestable from dbushell。您是否可以控制最终使用的插件?该项目已完全死亡,2年未更新。

可能明智的做法是检查仍然维护的解决方案并提出您的功能,这几乎是许多图书馆现在拥有的“protectRoot”功能。

如果您无法控制插件,此功能目前尚未实现,可能永远不会实现。

如果您可以控制插件但仍想使用此插件,那么解决方案可能是使用fork(自项目已经死亡以来有很多)仍然维护并具有此功能。

另一个解决方案是从提交给项目的许多pull requests中挑选自己感兴趣的代码但是永远不会合并。

例如,这个pull request添加了新的回调而不是目前唯一可用的回调:beforeDragStartdragStartdragMovebeforeDragEnddragEnd等。这些新的回调提供了许多参数,例如您当前正在移动的项目,它在您之前的位置开始拖动它和目的地。基于这些新信息,尤其是目标,如果目标是根节点,则可以取消拖动。

$('.dd').nestable({})
.on('dragMove', function(event, item, source, destination) {
    // item: item we're moving.
    // source: original source of the item.
    // destination: new position of the item.
});

另一个可以满足您需求的拉动请求是this one。它提供回调以拒绝特定的拖动事件,例如,如果被拖动的项目成为根元素,则可以拒绝拖动事件。

$('.dd').nestable({
  reject: [
    {
      rule: function() { 
        // $(this) refers to the dragged element. 
        // Return TRUE to cancel the drag action.

        return $(this).parent().hasClass("rootList");
      }
    }
  ]
});
另一答案

我无法找到所有可嵌套拉取请求和嵌套本身的良好解决方案。我遇到了用于jQuery-UI可排序的this扩展。这里有protectRoot酒店。这非常有效。示例代码:

HTML

<ol class="sortable">
    <li><div>Some content</div></li>
    <li>
        <div>Some content</div>
        <ol>
            <li><div>Some sub-item content</div></li>
            <li><div>Some sub-item content</div></li>
        </ol>
    </li>
    <li><div>Some content</div></li>
</ol>

使用Javascript

$('.sortable').nestedSortable({
    handle: 'div',
    items: 'li',
    toleranceElement: '> div',
    protectRoot: true,
    maxLevels: 2
});

以上是关于Nestable list - 禁止将子项移出父元素的主要内容,如果未能解决你的问题,请参考以下文章

拖放项目并在数据库中更新后,如何在 jQuery Nestable 插件中获取子项和 id?

iOS 15.3+ SwiftUI中List子项目禁止被删除但头部仍显示删除按钮的解决

iOS 15.3+ SwiftUI中List子项目禁止被删除但头部仍显示删除按钮的解决

echars环型图怎么禁止移入移出事件

javascript父级鼠标移入移出事件中的子集影响父级的处理方法

Nestable可拖拽树