JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

CSS

::selection {
  background-color: yellow;
}

JavaScript

const element = document.createElement('div')
element.innerHTML = 'If the user clicks outside an element, drags onto it, and releases the button, this is still counted';
document.body.appendChild(element)
let moved;
let downListener = () => {
  moved = false
}
element.addEventListener('mousedown', downListener)
let moveListener = () => {
  moved = true
}
element.addEventListener('mousemove', moveListener)
let upListener = () => {
  if (moved) {
    console.log('moved')
  } else {
    console.log('not moved')
  }
}
element.addEventListener('mouseup', upListener)

// release memory
/* element.removeEventListener('mousedown', downListener)
element.removeEventListener('mousemove', moveListener)
element.removeEventListener('mouseup', upListener) */