JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
Hello, World!
</div>

CSS

.dragging {
  background-color: green;
}

JavaScript

const $div = $('div');
const threshold = 10;
let thresholdReached = false;
let origin;
$div.draggable({
  start (startEvent) {
     origin = {
        x : startEvent.pageX,
        y : startEvent.pageY
     }
  },
  drag (dragEvent) {
    if (!thresholdReached) {
  	  const deltaX = Math.abs(origin.x - dragEvent.pageX)
      const deltyY = Math.abs(origin.y - dragEvent.pageY)
      thresholdReached = deltaX > threshold || deltyY > threshold
      if (thresholdReached) {
         $div.addClass('dragging')
      }
    }
  },
  stop (stopEvent) {
     thresholdReached = false
     $div.removeClass('dragging')
  }
});