javascript - 可嵌套列表 - 禁止将子项移出父元素

Question

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

如您所见，应允许将子项从父项内部移动到另一个父项，但不应允许将子项移出任何父项。

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

Answer 1

注意 1 在阅读此答案之前请参阅 other回答，真的很有用，对我帮助很大。注释 2 如该答案所述，original library 的作者，那个图书馆完全死了。但是有人负责继续开发这个库，这里是 new library
注意3即使是新库也不支持拒绝规则，你还是要用库的pull request。

我遇到了与提问者完全相同的情况(这就是让我到达这里的原因)。这是我解决问题的方法(我希望这对其他人有帮助)

回答

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