Drag and Drop appears to be disabled or broken in my content pane add-in

Gregg8 commented 3 years ago

The components in our add-in which make use of the browser drag/drop events currently don't work. The drag doesn't even start. It appears as if drag/drop is disabled in add-ins.

Your Environment

Platform: PC desktop
Host: Excel
Office version number:
- 2108 (build 14326.20238 64-bit)
- Also fails on 2107 and 2109 (current beta channel)
- Note: One of our clients was pinned to version 2104 and it worked on that version
Operating System: Windows 10 (21H1)
WebView2: 92.0.902.84

Expected behavior

Drag & drop should work as it does when we run our add-in in both Chrome and Edge 92.0.902.84 (which is the same version as the installed WebView2).

Current behavior

When you initiate the drag, the ondragstart event fires.
However, instead of the ondragover, ondrop and ondragend events being fired as you drag around, it immediately fires an ondragend event which cancels the operation.

Steps to reproduce

The simplest example I could come up with is the drag/drop demo in W3Schools:

https://www.w3schools.com/html/html5_draganddrop.asp

Open this in your browser, and you'll see you can drag and drop the W3Schools logo from one box to another.

I created an add-in manifest which points to this url.

Steps:

Copy the following manifest to the Trusted Add-in Catalogs directory
Insert it into an Excel worksheet
You should see that it doesn't work as it does in a standard browser
Initially it may look like it works, because you end up dragging an image but no, it hasn't
On my PC it creates a copy of the image in an Excel picture container which is independent from the add-in and you can drag it anywhere within Excel
In the browser, you can only drag the image between the two boxes

<?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ContentApp">
  <Id>ab93afab-847d-42aa-972a-30a56098db83</Id>
  <AlternateId>en-US\WA123456789</AlternateId>
  <Version>1.0.0.0</Version>
  <ProviderName>W3Schools</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="HTML Drag and Drop API" />
  <Description DefaultValue="Testing" />
  <Hosts>
    <Host Name="Workbook" />
  </Hosts>
  <Requirements>
    <Sets DefaultMinVersion="1.1">
      <Set Name="TableBindings" />
    </Sets>
  </Requirements>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://www.w3schools.com/html/html5_draganddrop.asp" />
    <RequestedWidth>400</RequestedWidth>
    <RequestedHeight>400</RequestedHeight>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
  <AllowSnapshot>true</AllowSnapshot>
</OfficeApp>

Context

Drag and drop (within the confines of our app) is a fundamental part of our add-in and it would be difficult for us to code an alternative UI and inconvenient for our users
Note that we don't need to drag anything from our add-in to a worksheet or visa versa

The example uses the jQuery library which does not use the standard drag/drop events, but instead implements a custom version of drag/drop within its code
I inspected the event handlers at runtime to confirm this
Whereas our app (and the W3Schools app) DOES make use of the browser drag/drop events.
Consequently, if you replace the W3Schools url above with https://jqueryui.com/draggable, it does work
However, we never use jQuery in our apps and would just like the standard drag/drop events to work as they once did

Dengshan2018 commented 3 years ago

There is the issue to support ondrop/ondragover in in-content add-in on webview2. Working with webview2 team to see if there is workable solution. @Gregg8, as alternative solution, could you build similar experience through mouse event?

Gregg8 commented 3 years ago

Thanks @Dengshan2018. Yes, we are looking into simulating drag/drop in our code, as jQuery does.

OfficeDev / office-js