Interact.js: Dropzone is still active when hidden in overflow scroll container (scrolled away)

[spierala]

Expected behavior

DropZone should not be active when it is hidden (scrolled away).

Actual behavior

DropZone remains active when scrolled away.

System configuration

interact.js version: 1.3.4
Browser name and version: Chrome 71
Operating System: MacOS 10.12, Win10

Codepen: https://codepen.io/spierala/pen/GzMXYY

Possibly this issue is related: DropZones can be overlapped by scrolled away DropZones. As a result the DropZone in the foreground is not reachable anymore for the Drag element:
https://codepen.io/spierala/pen/zePoRp

I tried to fix it via z-index, but it did not work.

[spierala]

Problem solved :)

Simply add a checker function to the dropZone settings:

interact('.dropzone').dropzone({
    ondrop: function (event) {
    ...
    },
    checker: function (dragEvent,
                       event,
                       dropped,
                       dropzone,
                       dropElement) {

        // Check if DropZone is under the pointer and visible
        let elementsFromPoint = document.elementsFromPoint(event.clientX, event.clientY);
        let isDropZoneFromPoint = elementsFromPoint.some(el => {return el === dropElement});
        return dropped && isDropZoneFromPoint;
    }
});

[spierala]

FYI
much better performance:

checker: (dragEvent, event, dropped, dropzone, dropElement) => dropped && dropElement.matches(':hover')