MicrosoftEdge / MicrosoftEdge/WebView2Feedback
[Problem/Bug]: In WebView2CompositionControl, the HTML/JS drag/drop not work
@Badhri is already working on this.
Since May 12, 2025.
- Dominant language
- PowerShell
- Stars
- 526
- Forks
- 67
- PR merge metrics
- No merged PRs in 30d
Description
What happened?
The HTML/JS drag/drop can't work well in WebView2CompositionControl.
If you drag in WebView2, it will be like this.
If you drag in WebView2CompositionControl, it will be like this.
Importance
Blocking. My app's basic functions are not working due to this issue.
Runtime Channel
Stable release (WebView2 Runtime)
Runtime Version
No response
SDK Version
No response
Framework
WPF
Operating System
Windows 11
OS Version
No response
Repro steps
I'm trying to use WebView2CompositionControl to replace the WebView2 and we want to avoid the Airspace issue.
But the drag drop can't work well compared to WebView2.
<Window x:Class="WpfApp8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp8" xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<wpf:WebView2CompositionControl Source="file:///D:/TestDrag.html"></wpf:WebView2CompositionControl>
<!--<wpf:WebView2 Source="file:///D:/TestDrag.html"></wpf:WebView2>-->
</Grid>
</Window>
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<OutputType>WinExe</OutputType>
<TargetFramework>net8.0-windows10.0.17763</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<UseWPF>true</UseWPF>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.Web.WebView2" Version="1.0.3240.44" />
</ItemGroup>
</Project>
Please create a HTML file. Put it to D:\ or replace the Source URL in the XAML.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Drag Test</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
cursor: grab;
margin: 20px;
border: 1px solid #333;
user-select: none;
}
#droptarget {
width: 200px;
height: 200px;
background-color: lightgray;
border: 2px dashed #666;
margin: 20px;
text-align: center;
line-height: 200px;
font-family: sans-serif;
color: #444;
}
</style>
</head>
<body>
<h3 style="text-align:center;">Drag Test</h3>
<div id="draggable" draggable="true">
Drag Me
</div>
<div id="droptarget">
Target Area
</div>
<script>
const draggable = document.getElementById('draggable');
const droptarget = document.getElementById('droptarget');
draggable.addEventListener('dragstart', function (event) {
event.dataTransfer.setData("text/plain", event.target.id);
});
droptarget.addEventListener('dragover', function (event) {
event.preventDefault();
});
droptarget.addEventListener('drop', function (event) {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
const draggedElement = document.getElementById(data);
droptarget.innerHTML = "";
droptarget.appendChild(draggedElement);
draggedElement.style.display = "block";
});
</script>
</body>
</html>
Repros in Edge Browser
No, issue does not reproduce in the corresponding Edge version
Regression
No, this never worked
Last working version (if regression)
No response
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.