JSFiddle - React, Tailwind, and code Playground

JavaScript

let drag = false
let threshold = 5
let startingX
let startingY

let downListener = (e) => {
	drag = false
  startingX = event.pageX
  startingY = event.pageY
}

let moveListener = (e) => { 
  const moveX = Math.abs(e.pageX - startingX) 
  const moveY = Math.abs(e.pageY - startingY)
  
  if (moveX >= threshold || moveY >= threshold) {
  	drag = true
  }
}

let upListener = () => {
	if (drag) {
  	console.log('Drag Detected')
  } else {
  	console.log('Click Detected')
  }
}

window.addEventListener('mousedown', downListener)
window.addEventListener('mousemove', moveListener)
window.addEventListener('mouseup', upListener)