Implement Nested sortables

[AlexNek]

There are many requests for such functionality:
https://sortablejs.github.io/Sortable/#nested
This is not what I expected from a good nested list, but this is the only behaviour it is designed to do.

[AlexNek]

Try the develop branch, please.

[gordon-matt]

Awesome work. Will there be a NuGet package at some point?
EDIT: Ignore the silly question. Just saw the link in the README. Looking forward to the nested sortables feature!

[AlexNek]

I wait for bug report, but can update production state if you need.

Looking forward to the nested sortables feature!

Everything depends on your wishes

[gordon-matt]

No worries. Take your time. Any estimate though? Maybe you can release a beta package if you're not ready for a stable release? I'm trying to prototype an idea I have at the moment and this would be super helpful.

[AlexNek]

It's already been published. I just can't understand the result sometimes.

[gordon-matt]

Fantastic. Thanks

[AlexNek]

Don't mention it. Are there any other needs?

[gordon-matt]

Really appreciate the help. Just got it working a few minutes ago and it looks great. It does have a few bugs in; things aren't always placed exactly where you dropped them and it sometimes rearranges things in a way that is unexpected. So it still needs some work to be production ready, but this is good enough as a prototype.

Looking forward to the final release. I don't expect you to do it ASAP.. after all, it's free and I'm sure you're busy with other things. I'll keep checking back here from time-to-time.

Just one more suggestion: can you make it so new levels can be created by drag-dropping a field onto another field?

So for example:

• Level 1
  • 1.1
  • 1.2
  • 1.3
• Level 2
  • 2.1
  • 2.2

If I drag/dropped 1.3 onto 1.1, for example, then I would hope it should look like this:

• Level 1
  • 1.1
    • 1.3
  • 1.2
• Level 2
  • 2.1
  • 2.2

Also is there some kind of "on drop" event I can use to get the ID of each item? I would need to have some way to persist the levels and order to the database. Example:

void OnDrop(Item item, Item parent, int order)
{
	item.ParentId = parent.Id; // to keep each item assigned to the correct parent
	item.Order = order; // to keep each item in the same level in the correct order
}

Anyway, great work! Thanks for the effort and for your help.

[AlexNek]

things aren't always placed exactly where you dropped them and it sometimes rearranges things in a way that is unexpected

This is exactly what I have seen from time to time, but I cannot reproduce it.

..by drag-dropping a field onto another field?

I don't think it is implemented in JS lib

..get the ID of each item?

I'll try to add a new sample for it. Or at least we can discuss it first

[AlexNek]

I used only 2 events:
onRemove: (event) => {
onUpdate: (event) => {

Looks like you want to use onEnd:
JS sortable

[AlexNek]

onEnd fired after onUpdate.
So please use
protected virtual void ListArrangeItems(int oldIndex, int newIndex, IList items)
JS library has no parent/child concept. Possible to get item by index only.

[AlexNek]

I created a sample implementation for list persistence in the development branch. Persistence class can be extended to store changes only.

[AlexNek]

Looks like the example was designed incorrectly for nested lists. We now have 2 different data representations: root node and group models. ... No something else

[AlexNek]

I hope I found the reason. Blazor inserted an empty comment for each component and that destroys child indexes.
Please show direct children within single component! See corrected example.