microsoft / microsoft/microsoft-ui-xaml

Broken drag and drop within and out of WebView2

Open
#10,576 12 comments 10 reactions 0 assignees View on GitHub
area-WebView bug
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

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](https://gist.github.com/ivanjx/b026ba331796e20a717778ae56760e3c) 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](https://codepen.io/erithax/full/EajYQor) (or you can locally serve the following HTML):

drag and drop HTML test page





section {
border:1px solid gray;
display:flex;
align-items:center
}
i {
color: gray;
}



.bounder {
display: inline-block;
width: 100px;
height: 30px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}


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));
}


Drag within



drag me





Teal box should be draggable between areas


 



function intoDropHandler(ev) {
ev.preventDefault(); // Prevent file from being opened

const showDropped = document.getElementById("showDropped");
showDropped.innerHTML = "";
const addFile = (file) => showDropped.innerHTML += file + " ";

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
}

Drag file into



Dragging files into box should list their names


 


Drag image out




Dragging image to your file explorer should download the image there



- WinForms: follow the [get started guide](https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/winforms) up to and including step 6.
- WPF: follow the [get started guide](https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/wpf) up to and including step 5.
- WinUI: follow [get started guide](https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/winui) up to and including step 6.
Set ``!

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

## Related

In https://github.com/microsoft/microsoft-ui-xaml/issues/7366, which was closed without a solution, @codendone says
> Dragging out of a WebView2 (or even within a WebView2, if that drag uses drag-n-drop) is still not fixed and got moved to 1.6. Fixing dragging out requires work both in core WebView2 and the XAML element. That work is still in progress.

hence this tracking issue.

This is clearly a pervasive issue which is causing issues to pop up on repositories all across the stack.
There are more drag and drop issues that are potentially related to this,
but these are the ones I deemed likely to be about the same issue.

#### Microsoft
- 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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the WinUI WebView2 control and the linked drag-and-drop test page, then compare the WinForms, WPF, and WinUI get-started examples. Read the related microsoft-ui-xaml and WebView2 issues to understand the ongoing work across the XAML element and WebView2. Done means drag-and-drop works within the control, into it, and from it to the file explorer.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
desktop
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.