In my React application, I am facing an issue with a transparent div that serves as a dropzone for draggable elements. This div covers text and also contains children elements that may have their own text content.
<Dropzone>
<SomeChild>
...
<p>some text</p>
...
</SomeChild>
</Dropzone>
The problem arises when the Dropzone element prevents users from highlighting any text within its children due to its covering nature.
One common approach to address this is by adding the CSS property pointer-events to the Dropzone element.
.dropzone {
pointer-events: none;
}
However, this solution inadvertently disables the drag-and-drop functionality, which defeats the purpose of having a Dropzone element in the first place.
Are there alternative solutions to allow text highlighting within children elements without compromising the Drag-and-Drop feature? I am looking for ways to work around this limitation.