CSS Pointer Events – Accept Drag, Reject Click

Question

tldr; I need an element to register drag and drop pointer events, but pass click and other pointer events to elements behind it.

I am building a drag and drop photo upload feature in react using react-dropzone. I want the dropzone to be over the whole page, so if you drag a file onto any part of the page, you can drop it to upload the image. The dropzone is transparent when no file is dragged over it, so I need clicks to register with 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, pointer-events: none; causes the dropzone to not recognize the necessary drag and drop events. Is there any way to recognize these specific pointer events, while passing others (like click) to elements behind the dropzone?

Calculation

Answer 1

Try using the draggable attribute. It worked for me

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

Duodenitis

Answer 2

UPDATED ANSWER:

#dropzone{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; //set this to make it sit on the top of everything
    pointer-events: none;
}

.user-is-dragging #dropzone{
    pointer-events: all !important;
}

//element declarations
const dropzone = document.getElementById("dropzone");
const body = document.body;

//timeout function to help detect when the user is dragging something
let dragHandle;

// utility function to detect drag & drop support
function dragDropSupported() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

function initDragDrop(){

    //simply exit / do other stuff if drag & drop is not supported
    if(!dragDropSupported()){
        console.warn("Drag & drop not supported");
        return;
    }

    //add user-is-dragging class which enables pointer events for the drop event
    body.addEventListener("dragover", (e) => {
        body.classList.add("user-is-dragging");
        clearTimeout(dragHandle);
        dragHandle = setTimeout(() => {
            body.classList.remove("user-is-dragging");
        }, 200);
    });

    //this is to prevent the browser from opening the dragged file(s)
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
    });

    dropzone.addEventListener('drop', (e) => {
        //prevent the browser from opening the dragged file(s)
        e.preventDefault();

        //dragged files
        const files = e.dataTransfer.files;
        console.log(files);
    })

}

Amphichroic

Where does the variable 'drag Drop Support' and 'dragDropTarget' reference? – Stagemanage

This function is missing many previous declarations such as: timeout ["dragLeaveBodyRemoveclass"], body, dragDropSupport, etc .. If it is executed it gives many errors, it would be good to put it in a cleaner way – Stagemanage

I was young when i wrote this answer, thanks for commenting i am editing it soon so it provides a proper & clean solution and in vanilla JS – Benzidine

Answer 3

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

Agata

Answer 4

I fixed this error by setting pointer-events to be none on .file-drop but auto on .file-drop > .file-drop-target.file-drop-dragging-over-frame

Crookes

you have a simple and real example to be able to see it, because it doesn't work for me with pointer-event in css, I can't get it to work – Stagemanage