Drag and Drop does not work in UWP app on Windows 10 Mobile

Question

I develop UWP app with C# and XAML. I try to implement drag&drop functionality.

Here is a simple app to demonstrate how I try to do it. The app has two borders - one border is dragged, and second one is for drop. Also I write informaton about events to output.

Version 1 (using CanDrag=true on a dragged item)

<Page x:Class="UWP_DragDrop.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:UWP_DragDrop"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Border x:Name="draggedItem"
            Grid.Row="0"
            Height="100"
            Width="150"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Background="Red"
            CanDrag="True"
            DragStarting="draggedItem_DragStarting"
            DropCompleted="draggedItem_DropCompleted">
        <TextBlock Text="Drag this item"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Border>
    <Border x:Name="dropArea"
            Grid.Row="1"
            Height="100"
            Width="150"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Background="Blue"
            AllowDrop="True"
            DragEnter="dropArea_DragEnter"
            Drop="dropArea_Drop">
        <TextBlock Text="Drop here"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Border>
</Grid>

using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace UWP_DragDrop
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void draggedItem_DragStarting(UIElement sender, DragStartingEventArgs args)
        {
            Debug.WriteLine("draggedItem_DragStarting");
        }

        private void draggedItem_DropCompleted(UIElement sender, DropCompletedEventArgs args)
        {
            Debug.WriteLine("draggedItem_DropCompleted");
        }

        private void dropArea_DragEnter(object sender, DragEventArgs e)
        {
            Debug.WriteLine("dropArea_DragEnter");
            e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Copy;
        }

        private void dropArea_Drop(object sender, DragEventArgs e)
        {
            Debug.WriteLine("dropArea_Drop");
        }
    }
}

1) It works correctly when I run it in Visual Studio for LocalMachine and for Simulator (but only for mouse input). In output I have the following:

draggedItem_DragStarting dropArea_DragEnter dropArea_Drop draggedItem_DropCompleted

2) When I try to run it in Simulator (touch mode) - I can't drag item. No one event is fired (output is empty)

3) When I try to run it in Windows 10 Mobile emulator, it does not work. What I see in output is:

draggedItem_DragStarting draggedItem_DropCompleted

As soon as I move the element - DropCompleted event fires.

Version 2 (using StartDragAsync)

I removed CanDrag=true for dragged item, and start drag operation by StartDragAsync.

<Page x:Class="UWP_DragDrop.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:UWP_DragDrop"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Border x:Name="draggedItem"
            Grid.Row="0"
            Height="100"
            Width="150"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Background="Red"
            PointerMoved="draggedItem_PointerMoved"
            DragStarting="draggedItem_DragStarting">
        <TextBlock Text="Drag this item"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Border>
    <Border x:Name="dropArea"
            Grid.Row="1"
            Height="100"
            Width="150"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Background="Blue"
            AllowDrop="True"
            DragEnter="dropArea_DragEnter"
            Drop="dropArea_Drop">
        <TextBlock Text="Drop here"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Border>
</Grid>

using System.Diagnostics;
using Windows.ApplicationModel.DataTransfer;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace UWP_DragDrop
{
    public sealed partial class MainPage : Page
    {
        IAsyncOperation<DataPackageOperation> _dragOperation;

        public MainPage()
        {
            this.InitializeComponent();
        }

        private void draggedItem_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            if (e.Pointer.IsInContact && (_dragOperation == null))
            {
                Debug.WriteLine("draggedItem_StartDragAsync");
                _dragOperation = draggedItem.StartDragAsync(e.GetCurrentPoint(draggedItem));
                _dragOperation.Completed = DragCompleted;
            }
        }

        private void DragCompleted(IAsyncOperation<DataPackageOperation> asyncInfo, AsyncStatus asyncStatus)
        {
            _dragOperation = null;
            Debug.WriteLine("draggedItem_DragCompleted");
        }

        private void draggedItem_DragStarting(UIElement sender, DragStartingEventArgs args)
        {
            Debug.WriteLine("draggedItem_DragStarting");
        }

        private void dropArea_DragEnter(object sender, DragEventArgs e)
        {
            Debug.WriteLine("dropArea_DragEnter");
            e.AcceptedOperation = DataPackageOperation.Copy;
        }

        private void dropArea_Drop(object sender, DragEventArgs e)
        {
            Debug.WriteLine("dropArea_Drop");
        }
    }
}

1) Desktop and Simulator (mouse mode) works.

2) Simulator (touch mode) now works too.

3) Windows 10 mobile emulator does not work. DropCompleter fires right after DragStarting again.

How can I make drag&drop work on Windows 10 mobile? Why version 1 does not work in scenario 2 and 3, and version 2 does not work in scenario 3?

Answer 1

Unfortunately, it seems like customize drag is currently not supported on emulator and mobile yet. Details please reference this known issue. As Raymond mentioned:

You can drag/drop items within a listview, and any UI element can be a drop target, but you don't get dragging to another process or drag customization.

At this time windows 10 doesn't support a full-fledged drag and drop feature.