JSFiddle - React, Tailwind, and code Playground

HTML

<div draggable="true" id="foo">Drag me!</div>

CSS

#foo {
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  
  width: 100vw;
  background: #ff0000;
  
  /* Remove to make dragend relative to current frame (on Chrome at least) */
  height: 100vh;
}

JavaScript

function getSuffix(n) { // because I'm OCD, I guess
	if (n % 100 > 3 && n % 100 < 21) return 'th';
  if (n % 10 === 1) return 'st';
  if (n % 10 === 2) return 'nd';
  if (n % 10 === 3) return 'rd';
  return 'th'
}

const onDrag = (e) => {
	let i = 0, view = window;
  while (view !== e.view) {
    i++;
    view = view.parent;
  }
  
  console.log(`e.clientX: ${e.clientX}; This event was triggered in the context of ${i === 0 ? '' : `the ${i}${getSuffix(i)}-level ancestor of `}the current window.`);
};

const element = document.getElementById("foo");
element.addEventListener("dragstart", onDrag);
element.addEventListener("dragend", onDrag);