https://github.com/syncfusionexamples/drag-and-drop-listview-xamarin

This repository contains sample about how to drag and drop an item from one to another listview in xamarin.forms?
https://github.com/syncfusionexamples/drag-and-drop-listview-xamarin

drag-and-drop listview xamarin xamarin-forms

Last synced: about 1 month ago
JSON representation

This repository contains sample about how to drag and drop an item from one to another listview in xamarin.forms?

• Host: GitHub
• URL: https://github.com/syncfusionexamples/drag-and-drop-listview-xamarin
• Owner: SyncfusionExamples
• Created: 2020-03-11T11:27:29.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-28T13:16:19.000Z (8 months ago)
• Last Synced: 2024-05-29T01:19:12.339Z (8 months ago)
• Topics: drag-and-drop, listview, xamarin, xamarin-forms
• Language: C#
• Homepage:
• Size: 519 KB
• Stars: 0
• Watchers: 5
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# How to drag and drop an item from one to another listview in xamarin.forms?

You can drag and drop an item from one to another [SfListView](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.SfListView.html?) using the [ItemDragging](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.SfListView~ItemDragging_EV.html?) event in Xamarin.Forms.

This article explains you about how to drag an item from one to other listview in xamarin.forms

https://www.syncfusion.com/kb/11203/how-to-drag-and-drop-an-item-from-one-to-another-listview-in-xamarin-forms 

**XAML**

The ListView is defined with **DragStartMode**, **OnHold**, and **OnDragIndicator**.

``` xml

    

        

            

            

        

        

            

                

                    

                

            

            

                

                    

                        

                        

                            

                                

                            

                        

                    

                

            

        

        

            

                

                    

                

            

            

                

                    

                        

                        

                            

                                

                            

                        

                    

                

            

        

    

```

**C#**

You can check the value of the bound of the **listview** in the **ItemDragging** event using the position and you can also handle the add or remove the item from one collection to another.

Here, the dragged item is removed from the **WorkDoneListView** bound collection and added to the **ToDoListView** bound collection.

``` c#

WorkDoneListView.ItemDragging += WorkDoneListView_ItemDragging;

 

private async void WorkDoneListView_ItemDragging(object sender, ItemDraggingEventArgs e)

{

    var position = new Point();

    var xPosition = e.Position.X;

    double yPosition = e.Position.Y;

    position.X = xPosition;

    position.Y = yPosition;

    if (e.Action == DragAction.Dragging)

    {

        if (this.ToDoListView.Bounds.Contains(position))

            this.ToDoListView.BackgroundColor = Color.Red;

        else

            this.ToDoListView.BackgroundColor = Color.White;

    }

    if (e.Action == DragAction.Drop)

    {

        if (this.ToDoListView.Bounds.Contains(position))

        {

            var item = e.ItemData as ToDoItem;

            await Task.Delay(100);

            viewModel.WorkDoneList.Remove(item);

            viewModel.ToDoList.Add(item);

            item.IsDone = false;

        }

        this.ToDoListView.BackgroundColor = Color.White;

    }

}

```

**C#**

Here, the dragged item is removed from the **ToDoListView** bound collection and added to the **WorkDoneListView** bound collection.

``` c#

ToDoListView.ItemDragging += ToDoListView_ItemDragging;

 

private async void ToDoListView_ItemDragging(object sender, ItemDraggingEventArgs e)

{

    var position = new Point();

    var xPosition = e.Position.X;

    double yPosition = e.Position.Y;

    position.X = xPosition;

    position.Y = yPosition;

 

    if (e.Action == DragAction.Dragging)

    {

        if (this.WorkDoneListView.Bounds.Contains(position))

            this.WorkDoneListView.BackgroundColor = Color.Red;

        else

            this.WorkDoneListView.BackgroundColor = Color.White;

    }

    if (e.Action == DragAction.Drop)

    {

        if (this.WorkDoneListView.Bounds.Contains(position))

        {

            var item = e.ItemData as ToDoItem;

            await Task.Delay(100);

            viewModel.ToDoList.Remove(item);

            viewModel.WorkDoneList.Add(item);

            item.IsDone = true;

        }

        this.WorkDoneListView.BackgroundColor = Color.White;

    }

}

```

Note:The ListViewItem is added to the container. So, the item does not come out from it.