JSFiddle - React, Tailwind, and code Playground

HTML

<p>Highlight "Inner" text to create draggable object.  Drag selection from inner too outer.</p>

<div id="outer">
    Outer
    <div id="inner">Inner</div>
</div>

<div id="event">
    <div id="name">event name</div>
    <div id="target">target</div>
    <div id="related">relatedTarget</div>
</div>

CSS

#outer {background: #EEE; padding: 2em;}
#inner {background: #FFF; padding: 2em;}

JavaScript

document
    .querySelector('#inner')
    .addEventListener('dragleave', function(e){
        document.querySelector('#name').innerHTML = e.type;
        document.querySelector('#target').innerHTML = e.target && e.target.id;
        document.querySelector('#related').innerHTML = e.relatedTarget && e.relatedTarget.id;
    });