Disable pointer-events only when dragging over an item

Question

I have a container with dynamic content a user can interact with. It could be a YouTube video (iframe), amongst other things.

A user can drag and drop an image into this container and it'll replace the dynamic content with their image.

I'm aware that due to the dynamic content, drag events will behave erratically in the container, so I need to do pointer-events: none.

The HTML container has the following classes ant-upload-drag and ant-upload-drag-hover. The ant-upload-drag-hover class is only active when the image being dragged is on-top of the container.

I have CSS akin to the following where ant-upload-drag-container contains the dynamic content that I want unreachable by pointer-events:

.ant-upload-drag-hover {
  .ant-upload-drag-container {
    pointer-events: none;
  }
}

Unfortunately, this doesn't work. It causes the container to behave erratically with the ant-upload-drag-hover class added and removed from the container over and over and over.

Meanwhile, the following works:

.ant-upload-drag {
  .ant-upload-drag-container {
    pointer-events: none;
  }
}

Essentially, as long as .ant-upload-drag-container is always pointer-events: none; things work as expected, but if the pointer-events: none is triggered dynamically on hover, then things don't go as planned.

The following video demonstrates visually:

https://share.getcloudapp.com/ApuRgQlZ

The first example shows what is desired (when pointer-events is always none). The second example shows the current state (when pointer-events is dynamically shifted to always none).

I know this isn't much to go off of, but I'm not sure if I fundamentally misunderstand pointer-events: none, or if some React rendering shenanigans are happening.

Presumably, the moment ant-upload-drag-hover class is added to the element, the pointer-events: none would trigger, but it seems like for some reason pointer-events: none is also triggered on the container or something else must be happening for the container to lose the hover state and remove the class.

Answer 1

I'm not sure whether pointer-events: none interferes with the drag-and-drop events but it would explain your bug.

I'd suggest that you instead put a layer on top of the container that catches these events instead.

Here an example with a button and the layer is toggles (by a class) every 3 seconds.

// toggle class `ant-upload-drag-hover` every 3 seconds
setInterval(() => {
  document.querySelector(".ant-upload-drag").classList.toggle("ant-upload-drag-hover");
}, 3000);

.ant-upload-drag-container {
  position: relative;
}

.ant-upload-drag-hover .ant-upload-drag-container::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 999;
  height: 100%;
  width: 100%;
  /* the rest is just for aesthetics: */
  content: " .ant-upload-drag-hover";
  background: rgba(255, 255, 255, .5);
  cursor: not-allowed;
}

button {
  padding: 50px 100px;
}

button::before {
  content: "Click here: ";
}

<div class="ant-upload-drag">
  <div class="ant-upload-drag-container">
    <button onclick="++this.textContent">0</button>
  </div>
</div>