Drag and Drop on Xamarin Forms

Question

We want to implement drag and drop functionality in Xamarin forms

and in this user should be able to drag an emoji from 1 place, and put on another. We don’t want the source emoji to go away though and should be able to come to know on which employee, rating is given .

Image how it is before

Image how it is after

Question also posted on: https://forums.xamarin.com/discussion/184104/drag-and-drop-on-xamarin-forms/p1?new=1

We have checked a few links like below, but none of them seem to work:

Xamarin Forms Drag Image between Views https://blog.francois.raminosona.com/drag-and-drop-in-xamarin-forms/

Will appreciate if could get some tips on how to do it and even if this was possible on forms?

Answer 1

You could check the code below.

xaml:

<StackLayout Margin="10">

        <StackLayout Margin="10" Orientation="Horizontal">
            <components:DragAndDropSample3ReceivingView
                BackgroundColor="Beige"
                HeightRequest="80"
                WidthRequest="80" />
            <components:DragAndDropSample3ReceivingView
                BackgroundColor="Beige"
                HeightRequest="80"
                WidthRequest="80" />
            <components:DragAndDropSample3ReceivingView
                BackgroundColor="Beige"
                HeightRequest="80"
                WidthRequest="80" />

        </StackLayout>
        <BoxView
            BackgroundColor="Blue"
            HeightRequest="5"
            WidthRequest="3" />
        <StackLayout Margin="10" Orientation="Horizontal">

            <components:DragAndDropSample3MovingView
                BackgroundColor="Red"
                CornerRadius="40"
                HeightRequest="40"
                WidthRequest="40" />
            <components:DragAndDropSample3MovingView
                BackgroundColor="Green"
                CornerRadius="40"
                HeightRequest="40"
                WidthRequest="40" />
        </StackLayout>

    </StackLayout>

Code Behind:

 public void OnDropReceived(IDragAndDropMovingView view)
    {
        if (view is DragAndDropSample3MovingView sender)
        {
            var control = new DragAndDropSample3MovingView()
            {
               BackgroundColor=sender.BackgroundColor,
               CornerRadius=sender.CornerRadius,
               WidthRequest=sender.WidthRequest,
               HeightRequest=sender.HeightRequest,                 
              
            };
            Content = control;


        }

    }

Screenshot:

You could check the source file from the code project for reference. https://github.com/WendyZang/Test/tree/master/Drag_Drop_Controls/Xamarin-Developer-Sample-master