react-dnd icon indicating copy to clipboard operation
react-dnd copied to clipboard

Using HTML5Backend breaks usage of DnD API on Dom elements

Open IamFonky opened this issue 5 years ago • 1 comments

Describe the bug I wanted to use the dnd api alone in a part of my App for performance issue but drag and drop didn't worked.

Reproduction

<div draggable="true">Drag me</div>

Steps to reproduce the behavior:

  1. SImply create a div or any other element with the draggable attribute

Expected behavior Being able to drag the element

Desktop (please complete the following information):

  • OS: Ubuntu 20.04
  • Browser Chromium/Firefox latest versions

Solution stop propagation for the 3 drag event on the div

<div
     draggable="true"
      onDragStart={e => {
        e.stopPropagation();
      }}
      onDragEnd={e => {
        e.stopPropagation();
      }}
      onDrag={e => {
        e.stopPropagation();
      }}
>
DRAG ME
</div>

IamFonky avatar Nov 18 '20 16:11 IamFonky

I wonder if react-dnd's HTML5 backend could take some sort of container argument at construction-time instead of adding event listeners to window, which may avoid breaking other things on the page that use drag and drop.

erjiang avatar Jan 21 '21 18:01 erjiang