Drag and drop then create nested item

[AaronSadlerUK]

I am looking to replace angular-ui-tree and I can see SortableJs supports nested items... However in the demo it doesn't look to support creating nested items by dragging and dropping.

Can this be done?

If so how?

Thanks for your help!

[robgeorgeuk]

I'd really like to see a vanilla example of this too.

There is a VueJs example though: https://sortablejs.github.io/Vue.Draggable/#/nested-example

[Blackcode]

I am working at something similar.Still having things to sort out but it's a good start.

CodePen Example

HTML CONTAINER:

<div class="container">

        <div id="cloning" class="row">
            <div id="example3Left" class="list-group col">
                <div class="list-group-item nested-sortable" name="container">Container</div>
                <div class="list-group-item nested-1 nested-sortable" name="query">Query</div>
                <div class="list-group-item nested-2" name="component text">Component Text</div>
                <div class="list-group-item nested-2" name="component bool">Component Bool</div>
            </div>

            <div class="list-group col">
                <div id="example3Right" class="list-group-item tinted nested-sortable" name="application">Application
                </div>
            </div>
            <div style="padding: 0" class="col-12">
            </div>
        </div>

</div>

JS CODE

<script>
        createNesting();

        var example3LeftSortable = new Sortable(example3Left, {
            group: {
                name: 'shared',
                pull: 'clone',
                put: false
            },
            animation: 150,
            onEnd: function (/**Event*/evt, /**Event*/originalEvent) {
                createNesting();

            }
        });

        var example3RightSortable = new Sortable(example3Right, {
            group: {
                name: 'shared',
                pull: false
            },
            animation: 150,
            sort: false
        });

        function createNesting() {
        // Nested demo
        const container = document.querySelector("#example3Right");
        var nestedSortables = [].slice.call(container.querySelectorAll('.nested-sortable'));
        // Loop through each nested sortable element
        for (var i = 0; i < nestedSortables.length; i++) {
            new Sortable(nestedSortables[i], {
                group: {
                    name: 'shared',
                    pull: false
                },
                animation: 150,
                sort: false,
                fallbackOnBody: true,
                swapThreshold: 0.50,
                onEnd: function (/**Event*/evt, /**Event*/originalEvent) {
                    //////////
                }
            });
            }
        }
</script>