Nesting with dynamically inherited class names

[designosis]

First, SortableJS is working perfectly. This is a request for ideas on how to modify it to behave in a slightly different way.

The following ... https://jsbin.com/zebiqik/edit?html,css,js,output ... is a nested sortable with a twist: When a list item with class nested-1 is dragged into a nested-3 group, it becomes nested-3.

I can think of many reasons why this approach would be useful. In the jsbin above, for example, all handles stay on the far left, and indenting items is managed by class. This could of course be done in the current nested methods with position: absolute, but there are other reasons to want the class to change depending on where you drag it.

As-is, the javascript doesn't recursively increment children items. So you can drag 1 (or any non-parent item) anywhere, and it inherits the class correctly. But dragging a nested group will usually fail.

Does anyone have any jQuery or javascript tips on the most elegant approach to recursively incrementing nested items?

[designosis]

I came up with something that worked for me, so I'm closing the issue. If anyone wants to see a different kind of nested dragging, here's one solution ...

https://jsbin.com/cotomep/edit?html,css,js,output

SortableJS is missing one key feature, which is the ability to adjust the level of an item by horizontal dragging. In other words, in the example above, say I drag 7 between 4 and 5. Ideally, I'd be able to set whether 7 was at the same level as 4, or the same level as 5, based on where my drop target is. I suppose I could try to figure that out. Let me know if there's any interest.

[waynevanson]

@neokio Sorry for not responding, I was thinking about this.

...and indenting items is managed by class

Is there a reason you want to do it by class rather than put each 'list of items' in a 'list'? I know of a few, but would like to hear your specific use case. react-sortable-tree uses your approach so it is compatible with react-virtualized.

SortableJS is missing one key feature, which is the ability to adjust the level of an item by horizontal dragging.

For your particular example, you won't be able to use what Sortable has because your list of nested items are flattened.

Even with it, there are some improvements that can be made on the library side. I don't believe there is really much additional code handling nested lists. Maybe it's something we can look into.

[waynevanson]

I'm opening so we can potentially work on this.

[designosis]

@neokio Sorry for not responding, I was thinking about this.

...and indenting items is managed by class

Is there a reason you want to do it by class rather than put each 'list of items' in a 'list'?

For my current use, having vertically aligned / consistent handles is aesthetically and functionally necessary. I was unable to quickly come up with a satisfactory way of doing this via CSS alone. If you know of any examples that work like this, I'd love to see them! Other benefits could include styling by depth (color coding), and best of all, the ability to create branches via CSS alone, basically like so ...

SortableJS is missing one key feature, which is the ability to adjust the level of an item by horizontal dragging.

For your particular example, you won't be able to use what Sortable has because your list of nested items are flattened.

I didn't realize it came with this feature! Is there somewhere I can see this in action?

[waynevanson]

If you know of any examples that work like this, I'd love to see them.

There are no examples on Sortable, but if you check out react-sortable-tree from earlier, they have JS that does exactly what you're after by default.

I didn't realize it came with this feature! Is there somewhere I can see this in action?

https://sortablejs.github.io/Sortable/#nested