Avoid nested groups with SortableJS

Question

I need to do something like this example in SortableJs doc but in addition I also need Nested Sortables lists. This is not a problem, I've achived.

The wrong part is that I must implement a costraint in nested groups, because I need to avoid neasted groups. A group cannot be neasted inside another group. A single element can be neasted inside a group.

Let see an image, this is ok, we have two groups (item2 and item5) with some single elements inside

But, this is forbidden for my project, a group inside a grop (item5 in item2)

I'd try to control things by the events: 'onChoose', 'onStart', 'onEnd', 'onAdd', 'onUpdate', 'onSort', 'onRemove', 'onChange', 'onUnchoose'. But without results.

Here is my code:


    
        Item 1
        Item 2
            
        
        Item 4
        Item 3
        Item 4
        Item 5
            
        
        Item 6
    

    
        Item 1
        Item 2
        Item 5
        Item 3
        Item 6

and the js

$(document).ready(function() {
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
for (var i = 0; i < nestedSortables.length; i++) {
    new Sortable(nestedSortables[i], {
        group: 'shared',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65,
        // trying to control elements
        onChange: function(e) {
            console.log('Left: onChange');
            console.log(e);
            e.preventDefault();
            return false;
        },
        onUnchoose: function(e) {
            console.log('Left: onUnchoose');
            console.log(e);
            e.preventDefault();
            return false;
        },
    });
}

new Sortable($('#example2-right')[0], {
    group: 'shared',
    animation: 150,
    onUnchoose: function(e) {
        console.log('Right: onUnchoose');
        console.log(e);
        e.preventDefault();
        return false;
    },
    onAdd: function(e) {
        console.log('Right: onAdd');
        console.log(e);
        e.preventDefault();
        return false;
    },
    onChange: function(e) {
            console.log('Right: onChange');
            console.log(e);
            e.preventDefault();
            return false;
        },
});
});

Avoid nested groups with SortableJS

0 Answers