We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Drag and drop in two list view

Hello,
I have two list views on a page and I want to implement following functionality.
When the user drags and drop in an item in the same list view it should change the position of the item (already implemented) now is there anyway, by which I can allow the user to drag an item from first list view and drop in another list view?

3 Replies

RS Rawoof Sharief Muthuja Sherif Syncfusion Team April 16, 2018 01:13 PM UTC

Hi Hetal, 
 
Currently we do not have support for Drag and drop the item from one list to another. We have added it in our feature request list. 
 
Note: The feature implementation is tentative and not a commitment on our parts. We do not have immediate plans for this feature implementation due to preplanned tasks. We will update you once the feature has been implemented.  
 
Regards, 
Rawoof M. 



ZQ z q July 10, 2019 08:40 PM UTC

What is the status on this feature?  I also want to drag and drop from one list view to another using React


DB Dinesh Babu Yadav Syncfusion Team July 11, 2019 10:08 AM UTC

Hi Customer, 
 
Query 1: Drag and drop into another ListView in Xamarin.Forms 
 
Currently, we don’t have immediate plan to implement the requested feature in Xamarin.Forms.SfListView. However, you can achieve your requirement in the sample level using the ItemDragging event of the listview. Based on the bounds value of the listview you can remove and add the dragging item from one collection to another.   
   
Code Example XAML:   
<ContentPage>   
    <Grid>   
        <syncfusion:SfListView x:Name="ToDoListView"   
                               ItemsSource="{Binding ToDoList}"   
                               DragStartMode="OnHold,OnDragIndicator">   
        </syncfusion:SfListView>   
        <syncfusion:SfListView x:Name="WorkDoneListView"   
                               ItemsSource="{Binding NewList}"   
                               DragStartMode="OnHold,OnDragIndicator">   
        </syncfusion:SfListView>   
    </Grid>   
</ContentPage>   
   
C#:   
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.NewList.Remove(item);   
            viewModel.ToDoList.Add(item);   
            item.IsDone = false;   
        }   
        this.ToDoListView.BackgroundColor = Color.White;   
    }   
}   
   
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.NewList.Add(item);   
            item.IsDone = true;   
        }   
        this.WorkDoneListView.BackgroundColor = Color.White;   
    }   
}   
   
You can download the sample from the below link. 
 
Query 2: Drag and drop into another ListView in React. 
 
Could you please confirm us that the platform which you would like to implement the requested feature? If it is other than Xamarin.Forms, we request you to create a new forum under your ID for further follow ups. It will help others to follow the same and won’t conflict this forum for Xamarin users. 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 


Loader.
Live Chat Icon For mobile
Up arrow icon