JSFiddle - React, Tailwind, and code Playground

by tara5

HTML

<div draggable="true" id="stick"></div>

CSS

#stick {
  z-index: 3;
  width: 101px;
  height: 101px;
  background-position: center;
  background-image: url("https://i.stack.imgur.com/YEoJ4.png")
}

JavaScript

$(document).ready(function() {
  let background = new Image();
  let stick = document.getElementById("stick");

  background.src = "https://i.stack.imgur.com/5My6q.png"

  document.body.appendChild(background);

  $(background).css({
    position: "absolute",
    left: "200px",
    top: "200px"
  });

  $(stick).css({
    position: "absolute",
    left: "250.5px",
    top: "250.5px"
  });

  let backgroundClientRect = background.getBoundingClientRect();
  let stickClientRect = stick.getBoundingClientRect();

  let prevClientX = 0,
      prevClientY = 0;

  let backgroundWidth = 200,
      backgroundHeight = 200;

  let stickWidth = 101,
      stickHeight = 101;

  let initialStickXCentre = stickClientRect.left + stickWidth/2;
  let initialStickYCentre = stickClientRect.top + stickHeight/2;

  let backgroundRarious = backgroundWidth/2;
  
  stick.addEventListener("dragstart", function(event) {
    var dragIcon = new Image();
    dragIcon.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    dragIcon.width = 200;
    event.dataTransfer.setDragImage(dragIcon, -10, -10);
  });

  stick.addEventListener("drag", function(event) {
    if ((event.screenX === 0) && (event.screenY === 0)) {
      return;
    }

    let stickClientRect = stick.getBoundingClientRect();

    let deltaClientX = 0,
        deltaClientY = 0;

    if (prevClientX) {
      deltaClientX = event.clientX - prevClientX;
    }

    if (prevClientY) {
      deltaClientY = event.clientY - prevClientY;
    }

    prevClientX = event.clientX;
    prevClientY = event.clientY;

    let left = stickClientRect.left + deltaClientX;
    let top = stickClientRect.top + deltaClientY;

    let stickXCentre = left + stickWidth/2;
    let stickYCentre = top + stickHeight/2;

    let stickXCentreDelta = initialStickXCentre - stickXCentre;
    let stickYCentreDelta = initialStickYCentre - stickYCentre;

    let stickXCentreDeltaSquared = stickXCentreDelta * stickXCentreDelta;
   ...