JSFiddle - React, Tailwind, and code Playground

by David Iglesias

HTML

<iframe src="https://flutter.dev"></iframe>
<div id="draggable" draggable="true">
Drag me!
</div>
<div id="shadow"></div>

CSS

* { box-sizing: border-box; }

iframe {
  width: 200px;
  height: 320px;
  user-select: none;
}

#shadow {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: yellow;
  pointer-events: none;
  position: absolute;
  border: 1px solid black;
  box-shadow: -1px 2px 2px #ccc;
}
#shadow.down {
  background: red;
}

#draggable {
  width: 40px;
  height: 40px;
  background: #fabada;
  position: absolute;
  user-select: none;
}

JavaScript

document.body.addEventListener('pointerout', (e) => {
  console.log(e.type);
});

document.body.addEventListener('pointerdown', (e) => {
  _shadowState(true);
});

document.body.addEventListener('pointerup', (e) => {
  _shadowState(false);
});

document.body.addEventListener('pointermove', (e) => {
  _moveShadow(e.clientX, e.clientY);
}, {
  passive: true,
});

draggable.addEventListener('drag', (e) => {
  _moveShadow(e.clientX, e.clientY);
}, {
  passive: true,
});

function _moveShadow(x,y) {
  shadow.style.top = `${y-5}px`;
  shadow.style.left = `${x-5}px`;
}

function _shadowState(down) {
  if (down) {
    shadow.classList.add('down');
  } else {
    shadow.classList.remove('down');
  }
}