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

Posted 2021-04-20

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

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

我认为代码太长了，所以这里是可嵌套列表，类似于我使用的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添加了新的回调而不是目前唯一可用的回调：beforeDragStart，dragStart，dragMove，beforeDragEnd，dragEnd等。这些新的回调提供了许多参数，例如您当前正在移动的项目，它在您之前的位置开始拖动它和目的地。基于这些新信息，尤其是目标，如果目标是根节点，则可以取消拖动。

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