The problem
Basically, I'm trying to get a regular HTML element to accept a dragged object from react-dnd, but I can't get the drop event to fire. I'm assuming that the drop "fails" because internally react-dnd thinks canDrop is false, because we're not hovering over a react-dnd dropTarget.
I'd like to know if it's possible to tell react-dnd that a certain div (outside of a react element) is safe for dropping.
Background
I'm implementing react-dnd into an app, and so far it's going great. However, there's a part of our app where some elements are not created by React, and although it currently accepts dropping files from the filesystem (using the HTML Drag & Drop API), I also want it to be able to accept drops that originate from react-dnd's draggable items.
So far, all the regular drag related events work fine, it's just that the drop event doesn't fire for the react-dnd draggables. This made me think it was related to me not calling preventDefault on some events (as seems to be the solution in many StackOverflow posts relating to this topic), but adding these changes doesn't make a difference. In the meantime, the drop event does still fire when dropping files, so obviously something is working fine.
This makes me think that the drop "fails" because internally react-dnd thinks canDrop is false, because we're not hovering over a react-dnd dropTarget.
I don't know how to make my drop target a react-dnd dropTarget. The target's parent component is a fairly expansive Class component, so hooks (although ideal) are out of the question there (and converting to function components would be too much work). Using the Higher Order Component doesn't work either, because the code that handles the drop is not accessible from any context where I'd be creating the Higher Order Component.
Is there a way of telling react-dnd that a regular DOM element is safe for dropping?
