JSFiddle - React, Tailwind, and code Playground

by Elmore Cheng

JavaScript

(function() {
  const el = document.createElement('div');
  const size = 100;
  el.style.width = el.style.height = `${size}px`;
  el.style.backgroundColor = 'black';
  el.style.position = 'absolute';

  const offset = {
      x: 0,
      y: 0
    },
    start = {
      x: 0,
      y: 0
    },
    state = {
      x: 0,
      y: 0
    };

  let valid = false;

  move(start)

  if (window.innerWidth <= 640) {
    console.log('touch mode');
    el.addEventListener('touchstart', event => touchstart(event.touches[0]))
    el.addEventListener('touchmove', event => touchmove(event.touches[0]))
    el.addEventListener('touchend', event => touchend(event.touches[0]))
  } else {
    console.log('mouse mode');
    el.addEventListener('mousedown', touchstart)
    el.addEventListener('mousemove', touchmove)
    el.addEventListener('mouseup', touchend)
  }

  function touchstart(touch) {
    valid = true;
    offset.x = touch.clientX;
    offset.y = touch.clientY;
  }

  function touchmove(touch) {
    if (!valid) return;
    state.x = touch.clientX - offset.x + start.x;
    state.y = touch.clientY - offset.y + start.y
    move(state)
  }

  function touchend() {
    valid = false;
    const rect = el.getBoundingClientRect();
    start.x = rect.left;
    start.y = rect.top;
  }

  function move({
    x,
    y
  }) {
    el.style.left = `${x}px`;
    el.style.top = `${y}px`;
  }

  document.body.appendChild(el)
})();