Nestable list - disable moving child items out of parent element

Question

My list allows moving child items out of parent item, and I want to change it.

As you can see, moving child items from inside of parent to another parent should be allowed, but moving child items outside of any parent item should not be allowed.

I think the code would be too long, so here is the nestable list similiar to that I'm using nestableList from Luna theme, and here is the script jquery.nestable.js

Answer 1

Note 1 before reading this answer refer to the other answer, it is really useful and helped me a lot. Note 2 as that answer said, and the author of the original library, that library is completely dead. But there is somebody which take the responsibility of continuing developing this library, here is the new library
Note 3 even the new library will not support rejecting rules, and you still have to use a pull request of the library.

I had EXACTLY the same case of the asker (and that what make me reaching here). Here is how I solved my problem (and I hope this will help others)

Answer

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