JSFiddle - React, Tailwind, and code Playground

HTML

<div draggable="true">Drag Me</div>

CSS

div[draggable] {
    width: fit-content;
    margin-bottom: 32px;
    padding: 16px 32px;
    background-color: black;
    color: white;
}

JavaScript

const element = document.querySelector('div');
var outside = false;

element.addEventListener('dragend', (e) => {
    console.log('Ended ' + (outside ? 'Outside' : 'Inside'));
});

element.addEventListener('dragstart', (e) => {
    outside = false;
});


window.addEventListener('dragleave', (e) => {
    window.setTimeout(() => {
        if ((e.target === document.documentElement || e.target === document.body) && e.relatedTarget == null && e.buttons != 0) {
            outside = true;
        }
    });
});

window.addEventListener('dragenter', (e) => {
    if ((e.target === document.documentElement || e.target === document.body) && e.relatedTarget == null) {
        outside = false;
    }
});