JavaScript drag/drop events not working in WinUI specifically (WPF is fine)

[Eilon]

Description

In JavaScript there are events such as ondrop, ondragover, ondragstart, and the property draggable, which are used together to enable drag/drop functionality in HTML-based apps.

On WinUI WebView2 these do not seem to function correctly and the ondragover event doesn't seem to fire (perhaps because the drag was never really started). On WPF WebView2 this works fine.

To see a sample of drag/drop, go to this sample: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

Version
SDK:

• WinUI: Windows App SDK 1.1.5
• WPF: NuGet 1.0.1343.22
  Runtime: 105.0.1343.33
  Framework: WinUI and WPF
  OS: Win11

Repro Steps

For WinUI:

1. Create new WinUI app
2. Replace the code in MainWindows.xaml.cs with this:

   public sealed partial class MainWindow : Window
   {
       public MainWindow()
       {
           var wv = new WebView2()
           {
               Source = new Uri("https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop"),
           };
   
           Content = wv;
       }
   }

3. Run the app and you should see a UI like this, but when you try to drag the image, it is not draggable (it does nothing):
   
   

Expected: The drag/drop operation should work exactly as it does when you navigate to the site in Edge or any other browser.

Interestingly, in the same example in WPF as you drag the image up, you can see it being dragged, and then you can drop it into the box. WPF repro steps:

1. Create new WPF app
2. Add NuGet reference to Microsoft.Web.WebView2
3. Replace the code in MainWindow.xaml.cs with this:

   public partial class MainWindow : Window
   {
       public MainWindow()
       {
           var wv = new Microsoft.Web.WebView2.Wpf.WebView2()
           {
               Source = new Uri("https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop"),
               Width = 400,
               Height = 400,
           };
   
           Content = wv;
       }
   }

4. Run the app and try to drag/drop the image on the right, and it works:
   

Originally reported in this .NET MAUI issue: dotnet/maui#9983

AB#36088806

[TCNOco]

I'm having very similar issues with dragging items using SortableJS. Drag events do nothing, but I can "drag" the image -- A full click starts a drag, and a full click stops the drag. The preview image of the drag only appears if I tab in and out of the program.

Using Windows API SendMessage to drag the window also results in very odd issues - but that's another WinUI issue (I assume could be my wonky code).

Both in my issue here: dotnet/maui#10185

[ismasanchez]

Due to the fact that it has an important impact in MAUI/Blazor app development, for apps that require drag and drop capabilities, when is this bug going to be fixed?

[johna-ms]

@jamesoli I think this is the drag drop bug, if not you can assign back to me