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
close icon

Drag and drop

Hi,

I'm working on something similar to KanbanBoard.
I have SfCarousel, and inside it I've got SfListView.
Is there any possibility to move element from one ListView to another?

Maybe there are other controls thac can I use to achive my goal? (No, SfKanban is not answer) ;)

9 Replies

DR Dhanasekar R Syncfusion Team March 26, 2019 05:16 AM UTC

Hi Jonasz, 
 
Greetings from Syncfusion. 
 
As per the current implementation of SfCarousel, we don’t have support to drag and drop the any element from one view to another view. We will validate the possibilities with SfListView control and let you know. 
 
Regards, 
Dhanasekar 



DY Deivaselvan Y Syncfusion Team March 26, 2019 12:47 PM UTC

Hi Jonasz,  
  
Currently, SfListView does not have support for drag and drop an item from one listview to another. We have already considered it as an feature and added it into our feature request list. You can track the progress of the reported feature from the below link.     
     

Note: The date for implementation of requested feature is tentative and it will be included in any of our upcoming release.  
  
  
We would like to let you know that 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;  
    }  
}  
  
Please find the sample from the below link.  
  
  
Note: ListViewItem is added in the container so item does not come out from it.  
  
Regards,  
Deivaselvan 



JM Jonasz Makulak April 3, 2019 05:17 PM UTC

Is there any possibility to make selected item follow user finger?
In ListView area it is nice, and item follows finger, but when user moves finger over the source list view it is not. 


DB Dinesh Babu Yadav Syncfusion Team April 4, 2019 12:17 PM UTC

Hi Jonasz, 
 
Query 1: Selected Item should follow user finger 
 
We would like to let you know that the Drag and Drop action in SfListView would be performed based on the gestures position only and it is irrespective of item. So, we regret to let you know that you could not able to move the selected item when touch finger is in other position. 
 
Query 2: Item is not visible when it is dragged into another listview. 
 
 By default, SfListView does not support to drag and drop the item between two listview. However, to achieve the requirement, we customized the listview at the sample level by removing the item from one listview and added into the another listview based on the touch position and did manual calculation accordingly. So, it behaves as like the reported which we have already updated in the previous update. 
 
Regards, 
Dinesh Babu Yadav  



JM Jonasz Makulak April 5, 2019 03:28 PM UTC

Thank You for answer, I've got one more problem.

I've got SfListView inside SfCarousel. When I'm trying to drag item (only reorder, I'm not trying to move from one list to another) Sfcarousel returns to its first state - for example, when I want to reorder items from 3rd column SfCarousel always back to 1st column.

Do You have solution for this?


GP Gnana Priya Namasivayam Syncfusion Team April 8, 2019 05:51 PM UTC

Hi Jonasz, 

We are currently checking on the reported query from our side. We will validate and provide further details on or before April 10, 2019. We will appreciate your patience until then. 

Regards, 
Gnana Priya N 



GP Gnana Priya Namasivayam Syncfusion Team April 10, 2019 01:00 PM UTC

Hi Jonasz, 
  
Thanks for your patience. 
We have checked the reported query with Sflistview inside sfcarousel page from our side. While drag and drop, items didn’t seem to re-order as mentioned in tested sample. Meanwhile, can you please explain your use case in detail to analyze better and provide appropriate solution at our end. We have attached the tested sample form your reference, please refer the sample form below. 


Can you please check with the above sample whether you are getting the reported issue in our sample also. If not, please revert us back with the issue reproducible sample so that we could able to analyzed your query better. 

Regards, 
Gnana Priya N 



JM Jonasz Makulak April 10, 2019 02:49 PM UTC

I'm sorry, I forgot to say, that it is necessary to set ViewMode="Linear".




MK Muneesh Kumar G Syncfusion Team April 15, 2019 12:06 PM UTC

Hi Jonasz, 
 
Thanks for your update,  
 
We have checked modified the sample with SfTabView Control to achieve your requirement with ViewMode as Linear. Please have the sample from the below link, 
 
 
Please check with the sample and let us know if you have any concern. 
 
Thanks, 
Muneesh Kumar G. 


Loader.
Live Chat Icon For mobile
Up arrow icon