Sortable: Can you have nested lists?
Cna I have a sortable with another sortable list inside it, whereby all items in both lists can be dropped into the other list?
joetidee
All 15 comments
Sortable — does not support nesting.
RubaXa
on 21 Jan 2016
exactly what i"m struggling with, i managed to get it working easily but no the data propagation back up
(everything gets re-rendered and items get copied instead of being transferred)
giladv
on 21 Jan 2016
I came here to ask the same thing...
shame... It would be great to be able to use this library in a tree like component.
nkev
on 22 Jan 2016
As I said earlier, if someone has a laconic solution (plugin), I with pleasure will review PR.
RubaXa
on 22 Jan 2016
Would love to see this as well.
taylorbrooks
on 22 Jan 2016
actually with some work you can have nested lists with Sortable, but you have to handle building 'tree' yourself.
Here is demo. It's not the best, but it is good to start from. I've achieved this using groups of Sortable with same name.
<html>
<head>
<title>Sortable</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<style>
.item {
padding: 1em;
margin-bottom: .2em;
background: rgba(120, 255, 120, 0.8);
}
.group {
padding: 1em;
margin-bottom: 1em;
background: rgba(255, 120, 120, 0.2);
}
.item.group {
background: rgba(120, 120, 255, 0.2);
}
</style>
</head>
<body>
<h1>Sortable</h1>
<div class="group" id="main">
<div class="header">Main</div>
<div class="item">divitem 1</div>
<div class="item">divitem 2</div>
<div class="item">divitem 3</div>
<div class="group item" id="tunnel">
<div class="header">Floor 1</div>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="group item" id="zone">
<div class="header">Zone 1</div>
<div class="item">item 12</div>
<div class="item">item 22</div>
<div class="item">item 32</div>
</div>
</div>
</div>
<script>
var opts = {
group: 'shared',
filter: '.header',
draggable: '.item'
};
var el = document.getElementById('main');
var sortable = Sortable.create(el, opts);
var el = document.getElementById('tunnel');
var sortable = Sortable.create(el, opts);
var el = document.getElementById('zone');
var sortable = Sortable.create(el, opts);
//You can also define item
/*
MAIN Sortable
Section A Sortable
Zone 1 Sortable
DEVICE #1
DEVICE #2
Zone 2 Sortable
Section B Sortable
*/
</script>
</body>
</html>
mbochynski
on 24 Jan 2016
I'm using the following work-around for nested lists: in _onTapStart :
if(nestedStarted){
//do nothing, drag already initiated
} else {
nestedStarted = true; // drag and drop is starting flag
//... original code
}
In _onDrop: nestedStarted = false; // end of the drag & drop
The goal is to avoid a start tap call for each list in the hierarchy of nested lists, where, in my case, the deepest lists are created last. It seems to do the job for my web app (touch device not tested). Any comments welcome.
Great plugin anyway.
nqu0
on 3 Feb 2016
+1
MichaelTSS
on 15 Mar 2016
This is my take on, in building sortable tree:
http://itsgoran.com/builder/
you can check code for clarification.
In short, i have rows,columns and widgets.
Rows can be moved up/down, columns only within rows, and widgets can be moved anywhere between columns. Click to add new row at the bottom. It was made in one day, plenty fixes/adjustments/optimization to go, but u get the point.
goranefbl
on 8 Apr 2016
@goranefbl You'll have to give us access to your computer so we can see it... :)
nkev
on 8 Apr 2016
:))) sorry, wrong link pasted
goranefbl
on 8 Apr 2016
That looks awesome, good stuff!
nkev
on 8 Apr 2016
I have a nested list hierarchy, and have set each list in that hierarchy to be sortable. This allows me to sort elements within each list, including the elements that contain sub-lists. It all works nicely out of the box with nothing special configured.
I am using jQuery to select each list in the hierarchy and then apply Sortable to it. That does mean a separate Sortable instance for each list, which is fine for my application.
To help sort the hierachy, I have buttons using bootstrap to show and hide different levels, i.e. the number of nested lists that are shown, so you can focus on sorting each level at a time.
Is this what the OP is asking?
// Catch every ul in the hierarchy.
jQuery('#hierarchy-wrapper ul').each(function(index, element){
Sortable::create(element, {...options...})
});
judgej
on 4 May 2016
There is actually a way to have nested Sortables but the trick is that the "draggable" class has to be the same.
stasnikiforov
on 30 May 2016
Currently does the Sortablejs support nested lists out of the box??
Can someone point to some nice demo or a plunker link ?
bhaskerchari
on 30 Apr 2018
Related issues
seltix5
·
3Comments
chrishaigy
·
3Comments
rakeshrockb
·
3Comments
artaommahe
·
4Comments
garygreen
·
3Comments
Most helpful comment
This is my take on, in building sortable tree:
http://itsgoran.com/builder/
you can check code for clarification.
In short, i have rows,columns and widgets.
Rows can be moved up/down, columns only within rows, and widgets can be moved anywhere between columns. Click to add new row at the bottom. It was made in one day, plenty fixes/adjustments/optimization to go, but u get the point.