[Enhancement] Support drag-and-drop reordering in CollectionView

[velocitysystems]

Summary

Support drag-and-drop reordering in CollectionView.

API Changes

public static readonly BindableProperty ReorderModeProperty;
public CollectionViewReorderMode ReorderMode { get; set; }

public enum CollectionViewReorderMode {
     Disabled,
     Enabled
}

When ReorderMode is set to Enabled, the view supports drag-and-drop reordering.
Upon dragging an item in the collection, the Move() method on the ObservableCollection<T> is called to signal the change to the dataset.

Intended Use Case

Reordering a collection of elements ie. tasks, reminders, photos, tracks in a playlist etc.

Other Notes

• Supported in iOS 9 and above+ in UICollectionView.
  https://github.com/xamarin/ios-samples/tree/master/ios9/CollectionView

• Supported on Android in RecyclerView using ItemTouchHelper.

• Supported on UWP in GridViewusing CanReorderItems="true" and ReorderMode.

[velocitysystems]

As a side note, we have built custom renderers for XF 3.3/3.4 to bring this functionality to ListView.
We currently have this supported on Android, iOS and UWP.

[velocitysystems]

@samhouts @hartez Would be happy to work on a PR for this if approved.

[bbl-Laobu]

Also: Drag and drop onto another item

Being able to drag and drop onto another item and having an event triggered that provides a references to the item that was dragged and the element that was dropped onto would be great as well.

Thus: drag item -> drop onto other item -> trigger event

Use case:

• Manually group: move item onto other item to create folder
• Move item in folder; in a collection containing both items and folders, drop items into folders... (= how file explorer works)
• Perform action when 2 items are combined (perform calculation, transform, start process...)
• ...

Having drag and drop and the corresponding event when dropping would allow a developer to do this.
Note that proper visuals will need to be present when dragging, dropping, hovering above and item...etc

[peterfournier]

@bbl-Laobu I'm working on a nuget for this feature here DragNDrop. Working on the iOS implementation now.

[adrianknight89]

I believe this should be supported by XF (i.e. no need for a separate Nuget).

[velocitysystems]

@adrianknight89 Agree

[adrianknight89]

@velocitysystems You could go ahead and submit a PR if you have it working already. I don't see a reason against this feature. I'd change the property name though. ReorderMode sounds like an enum not a boolean. Maybe try Draggable? Also, as mentioned above, it'd be nice to have proper events (DraggingStarted, Dragging, DraggingEnded, etc.) along with source and target items.

Other things to keep in mind:

• How will this work in the case of grouped items?
• Needs to be tested in linear and grid layouts
• Needs to be tested in portrait and landscape modes
• Will this be supported only by CollectionView? What about CarouselView?
• Needs to be tested with ObservableRangeCollection in addition to the typical collections/lists
• Is there a way to cancel dragging while it's in progress? Sometimes this might be needed upon UI errors or new items being added to the data source after DB fetch.
• Can drop animations be customized?

[marcojak]

This would be a great addon to a CollectionView.
Any news about it?

[dinobu]

I hope this will be supported on all 3 platforms (UWP, iOS, and Android) in Xamarin.Forms

[steckenpferd]

Any Status Update - this would be great !!

[Kalyxt]

What about raising a reward for someone who will do it ? 🍡

https://www.bountysource.com/issues/67186074-enhancement-support-drag-and-drop-reordering-in-collectionview

[jamsoft]

@bbl-Laobu I'm working on a nuget for this feature here DragNDrop. Working on the iOS implementation now.

Did you get anywhere with iOS Peter?

[jamsoft]

Also, it's really easy to implement drag n drop with RecyclerView and UICollectionView. So I guess it would be way easier to implement it starting from their architecture than trying to blend in my implementation.

Do you have any links to examples of doing this?

[roubachof]

yup it's implemented in my Component here:

https://github.com/roubachof/Sharpnado.Presentation.Forms/blob/master/Sharpnado.Presentation.Forms.iOS/Renderers/HorizontalList/iOSHorizontalListViewRenderer.DragAndDrop.cs

[jamsoft]

yup it's implemented in my Component here:

I cannot thank you enough. Much appreciated.

One question. When in Grid Layout mode with a single column is it also possible to have any form of grouping? With a group header view?

If not, I wonder where would be a good place to start on adding that feature IYO?

[roubachof]

maybe it would be good idea to open a feature issue on the Sharpnado's repo and discuss it there cause I'm afraid we would mess this issue if we continue our discussion.

[velocitysystems]

Just an update - with the announcement of Maui, I'm a little hesitant to put too much time into new feature work on XF now, but just focusing on bug fixes. Perhaps in the meantime, would be best to focus on implementing this in a separate NuGet package which can be bolted onto XF.

[jfversluis]

This would be soooo cool to have! And I see there is a lot of traction on this. I've put it on a list to make sure we have a look at this for .NET MAUI. Sadly, it won't happen for Forms anymore. If you have any detailed ideas about this, make sure to open a request on the .NET MAUI repo with all the details that you have on how you would like to use this.

Thanks everyone for the time and effort that you put into this!

[billvenhaus]

I completed implementations for this in both Xamarin Forms & .NET MAUI.

Here's the spec & pull request I submitted for .NET MAUI:
dotnet/maui#3767
dotnet/maui#3768

@jfversluis would you be at all interested in having me submit this into the Xamarin Forms repo as well? Perhaps a new branch that way you have it just in case? I've got it ready to go here:
billvenhaus@50c8019

Here are some standalone packages I wrote that everyone can use for the time being:
https://github.com/billvenhaus/ReorderableCollectionView.Forms
https://github.com/billvenhaus/ReorderableCollectionView.Maui

[jfversluis]

@billvenhaus you're the GOAT! This stuff is amazing, thank you for pouring this into specs and even code.

Like stated: I would love to have this in Forms, but at this time we can't add anything new because that will only add to the load of maintaining this while that is something that we want to phase out. I think this will be a great addition to .NET MAUI though, so let's see how it goes there :)