microsoft-ui-xaml Broken drag and drop within and out of WebView2

Drag and drop within, and out of WinUI WebView2 controls is broken.
See attached video!
This affects WinUI, and thus also .NET MAUI and UWP projects.

[!IMPORTANT]
If you are affected, Ivan Kara's (ivanjx) JS polyfill could be a temporary fix.
This does not work in all cases, e.g. mine.

Reproduction and Comparison

This issue only appears in WinUI. You can confirm this by comparing WinForms, WPF and WinUI, with a WebView2 control and this drag and drop test page (or you can locally serve the following HTML):

drag and drop HTML test page

<html>
<head></head>
<body>
  <style>
    section {
      border:1px solid gray; 
      display:flex; 
      align-items:center
    }
    i {
      color: gray;
    }
  </style>
   <section id="within">
    <style>
      .bounder {
        display: inline-block;
        width: 100px;
        height: 30px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
      }
    </style>
    <script>
      function withinDragStartHandler(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function withinDragOverHandler(ev) {
        ev.preventDefault();
      }

      function withinDropHandler(ev) {
        ev.preventDefault();
        const data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
    
    <div>Drag within</div>
    <div class="bounder" ondrop="withinDropHandler(event)"   ondragover="withinDragOverHandler(event)">
      <div id="draggable" style="padding:2px; background:teal;" draggable="true" ondragstart="withinDragStartHandler(event)">
        drag me
      </div>
    </div>
    ⇄
    <div class="bounder" ondrop="withinDropHandler(event)"   ondragover="withinDragOverHandler(event)"></div>
  </section>
  <div><i>Teal box should be draggable between areas</i></div>
  
  &nbsp;
  
  <section id="into">
    <script>
      function intoDropHandler(ev) {
        ev.preventDefault(); // Prevent file from being opened

        const showDropped = document.getElementById("showDropped");
        showDropped.innerHTML = "";
        const addFile = (file) => showDropped.innerHTML += file + "&emsp;";
        
        const files = [];
        if (ev.dataTransfer.items) {
          [...ev.dataTransfer.items]
            .filter(item => item.kind === "file")
            .forEach((item, i) => addFile(item.getAsFile().name)); 
        } else if (ev.dataTransfer.files) {
          [...ev.dataTransfer.files]
            .forEach((file, i) => addFile(file));
        }
      }
      function intoDragOverHandler(ev) {
        ev.preventDefault(); // Prevent file from being opened
      }
    </script>
    Drag file into
    <div
      id="drop_zone"
      class="bounder"
      ondrop="intoDropHandler(event);"
      ondragover="intoDragOverHandler(event);"
      style="border:1px solid black;"></div>
    <div id="showDropped"></div>
  </section>
  <div><i>Dragging files into box should list their names</i></div>
  
  &nbsp;
  
  <section id="outof">
    Drag image out
    <div class="bounder">
      <img style="height:100%;" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEVHcEw5QkA5QkBHUk45QkCmvKs5QkA5QkA5QkA5QkA5QkA5QkA5QkBmdGxZZl8/SUY5QkCxybY5QkA5QkA5QkA5QkA5QkCes6OTp5l/kIR2h3yKnY+sw7E5QkC0zLk3QD61zrqKP2QUAAAAHXRSTlMAIOD9z/3x5l8TtU6c+/z+Ov4UcIMMBvz7+vv7/Vk/DeAAAAEKSURBVDjLpZPdukMwEEX9hCRtFS1abWPm/Z/yzCTqaxhuzr4hsmyxRJJEMVqb5CCpck6lB8DdUe778zfFgLrtAsb57K6iPwXg1O8A5zIA5VmeHy7OQVUBVQwi0FBB/XzWVNGIABdc2/ZKFRdRkqbHvxHfdNCSrI4LPogfruiEgozuHHGacKSTLJUsQ14wUOQg+GbL8KJ5ygsE34YLHh7AB1eYrWWopjleVr+2DHUo4IoaVr6D5fbb0G58B8v4BXDjO1jGJSvfg7c8Fj8ZY98d74I8Cl9ZfFu/FSFKtDkDsI2yiwWVhfBanJ4H6seETUMaInQzD2wif/Ps6M/6P8Dvo+zR723KcrUR/gA9PCSYhPM/PQAAAABJRU5ErkJggg==" />
    </div>
  </section>
  <div><i>Dragging image to your file explorer should download the image there</i></div>

</body>
</html>

WinForms: follow the get started guide up to and including step 6.
WPF: follow the get started guide up to and including step 5.
WinUI: follow get started guide up to and including step 6. Set <controls:WebView2 ... Source="https://codepen.io/erithax/full/EajYQor" AllowDrop="true" ...>!

Try dragging inside the webview and dragging image from inside to outside webview.
See video below!

https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805 40👍 Closed as not planned?!
https://github.com/MicrosoftEdge/WebView2Feedback/discussions/3973
https://github.com/microsoft/microsoft-ui-xaml/issues/7366 7👍
https://github.com/MicrosoftEdge/WebView2Feedback/issues/2826
https://github.com/MicrosoftEdge/WebView2Feedback/issues/5237
https://github.com/dotnet/maui/issues/2205 18👍
https://github.com/dotnet/maui/issues/10701
https://github.com/dotnet/maui/issues/7390
https://github.com/microsoft/microsoft-ui-xaml/issues/10142
https://github.com/microsoft/microsoft-ui-xaml/issues/9187 6👍

External

https://github.com/Postlagerkarte/blazor-dragdrop/issues/152
https://www.reddit.com/r/dotnetMAUI/comments/10sk5kr/im_considering_giving_up_on_maui_blazor_hybrid/
https://stackoverflow.com/questions/73197778/net-maui-blazor-app-drag-and-drop-impossible
https://github.com/DennisvHest/MapMaven/issues/122
https://github.com/MudBlazor/MudBlazor/issues/8227

Media

https://github.com/user-attachments/assets/a7f5d69d-9fc7-4ff6-be4f-04b99a713453

NuGet package version: WinUI 3 - Windows App SDK 1.7.2: 1.7.250513003
Windows version: Windows 11 (24H2): Build 26100
Additional contect: _No response

May 23 '25 10:05 Erithax

I'm looking into fixing this issue.

Jun 07 '25 22:06 Erithax

where is the actual bug do you think @Erithax ? of course as you observed this doesn't happen on winforms and wpf and only happens on winui but the same problem seems to also happen on android and ios. is it the underlying platform or a bad webview wrapper implementation?

Aug 01 '25 09:08 ivanjx

where is the actual bug do you think @Erithax ? of course as you observed this doesn't happen on winforms and wpf and only happens on winui but the same problem seems to also happen on android and ios. is it the underlying platform or a bad webview wrapper implementation?

Definitely in the WebView wrapper.

I haven't looked into this issue further because my Windows device does not have the dozens of GB's of free space required for VS, SDKs, etc.

Aug 07 '25 15:08 Erithax

Broken drag and drop within and out of WebView2

Reproduction and Comparison

Related

Microsoft

External

Media