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:
<div id="nested" class="row">
<div id="example2-left" class="list-group nested-sortable col-sm-5">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2
<div class="list-group nested-sortable"></div>
</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5
<div class="list-group nested-sortable"></div>
</div>
<div class="list-group-item">Item 6</div>
</div>
<div id="example2-right" class="list-group col-sm-5">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 6</div>
</div>
</div>
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;
},
});
});
Sorry I'm late to the party. This might help.