Feature Request: option to not block non-ReactDnD drag operations

[ncphillips]

Right now all drag-and-drop operations that aren't managed by React-DnD are blocked. On pages that already have non-React-DnD drag-and-drop-handling code, this causes things to break while React-DnD is active. An option to disable this behavior would be useful.

For the current time, I've put up a version of react-dnd-html5-backend that's patched to have this disabled on npm.

Original Issue

[hubgit]

It's surprising that react-dnd-html5-backend still interferes with the operation of other components on a page (rich text editors, file upload dropzones, etc).

#1240 seems like it will have helped with #457 but there are still other unexpected side effects of the capturing event listeners and their use of event.preventDefault. I wonder if it might be possible to opt out of this behaviour?

[hubgit]

Related issues:

• Conflict with drag-n-drop extensions (such as dragdis.com for drag-n-drop bookmarking) #704
• Disabling React-DnD for a specific DOM-subtree #1115

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hubgit]

I encountered this again today.

[zlv-thisF]

hunger for it !!!
rich text editor with dnd troubles me a lot .....................

[willurmston]

I'm having this same issue with a ReactQuill component nested inside a DragSource. My hacky workaround is to conditionally apply the draggable ref, but that breaks text entry in Safari.

[0nn0]

Unfortunately running into the same issue. Using react-dnd pretty much blocks any none-react-dnd operations.

Any solution for this? Tried the suggestions in the original issue, but did not fix it for me.

[fengbozhi]

This problem occurs, is there a solution?

[benmkramer]

Pretty late here, but I found that replacing react-dnd on the page where I have another component that was being interfered with was the only solution I could get working.

I replaced it with "react-sortablejs" which in my use-case was able to provide the same thing I needed. Not happy to have both libraries installed, but it unblocks for now. If folks have found a react-dnd solution I'd be happy to see!

[mattvb91]

Im also having this issue now due to implementing craft.js so I need both to work for various instances on the page.

[nsnl-coder]

'./lib/html5BackEnd';

import { HTML5Backend } from 'react-dnd-html5-backend';

const shouldIgnoreTarget = (domNode: HTMLElement) => {
  return domNode.closest('.lexical-editor');
};

const ModifiedBackend = (...args: any) => {
  // @ts-ignore
  const instance = new HTML5Backend(...args);

  const listeners = [
    'handleTopDragStart',
    'handleTopDragStartCapture',
    'handleTopDragEndCapture',
    'handleTopDragEnter',
    'handleTopDragEnterCapture',
    'handleTopDragLeaveCapture',
    'handleTopDragOver',
    'handleTopDragOverCapture',
    'handleTopDrop',
    'handleTopDropCapture',
  ];
  listeners.forEach((name) => {
    const original = instance[name];
    instance[name] = (e: any, ...extraArgs: any) => {
      if (!shouldIgnoreTarget(e.target)) {
        original(e, ...extraArgs);
      }
    };
  });

  return instance;
};

// Decorate root elements with this
export { ModifiedBackend };

Hi guys, lexical dnd is not working when i use with react-dnd.
Here is the fix that work for me in 2024.

import { QueryClientProvider } from '@tanstack/react-query';
import axios from 'axios';
import React from 'react';
import { DndProvider } from 'react-dnd';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { App } from './App';
import queryClient from './config/reactQuery';
import { ModifiedBackend } from './lib/html5BackEnd';
import { store } from './store';
import './styles/index.css';

axios.defaults.baseURL = 'http://localhost:8080/api/v1';
axios.defaults.withCredentials = true;

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <BrowserRouter>
          <DndProvider backend={ModifiedBackend}>
            <App />
          </DndProvider>
        </BrowserRouter>
      </Provider>
    </QueryClientProvider>
  </React.StrictMode>,
);

Then i just need to import ModifiedBackend and use it instead of default html5backend.

Dont forget to replace the editor wrapper className with your.
The className that wraps the whole lexical in my case is '.lexical-editor'.

[RomuloDevelop]

@nsnl-coder Oh man this helps a lot. Thanks!