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