CSS pointer events - accept drag, reject click

Question

TL; DR; I need an element to register pointer drag events, but pass clicks and other pointer events to the elements behind it.

I am creating a drag and drop photo function using react-dropzone. I want it to dropzonebe on the whole page, so if you drag the file to any part of the page, you can upload it to upload the image. dropzoneit is transparent when the file is not dragged over it, so I need clicks to register with the elements behind it.

To accomplish this, I gave the dropzone component the following style:

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;

However, it pointer-events: none;forces you to dropzonenot recognize the necessary drag events. Is there a way to recognize these specific pointer events by passing other (e.g., click) elements behind dropzone?

Answer 1

I recently had a similar problem, and I managed to solve it by setting the z-index for dropzone to 1, setting the z-index for say elements to 2 with relative position.

Answer 2

Try to use draggable. It worked for me

<p draggable="true">
  jkjfj
</p>