JSFiddle - React, Tailwind, and code Playground

by Luiza CICONE

HTML

<img draggable="true" id="one" src="https://jsfiddle.net/img/logo.png" style="position: absolute; left: 50px; top: 120px; z-index: 3;">
<img draggable="true" id="two" src="https://jsfiddle.net/img/logo.png" style="position: absolute; left: 367px; top: 150px; z-index: 3;">

CSS

#one {
  background-color: #FFCCFF;
}

#two {
  background-color: #CCCCFF;
}

JavaScript

var anchor = {
  top: 0,
  left: 0
};

function touchStart(e) {
  e.preventDefault();
  var whichArt = e.target;

  var touch = e.touches[0];
  var positionX = touch.pageX;
  var positionY = touch.pageY;

  var elementRect = whichArt.getBoundingClientRect();
  anchor = {
    top: touch.pageY - elementRect.top,
    left: touch.pageX - elementRect.left
  };
}

function touchMove(e) {
  e.preventDefault();
  var dragElem = e.target;
  var touch = e.touches[0];
  var positionX = touch.pageX;
  var positionY = touch.pageY;

  dragElem.style.left = positionX - anchor.left + 'px';
  dragElem.style.top = positionY - anchor.top + 'px';
}

document.body.addEventListener('touchstart', touchStart, false);
document.body.addEventListener('touchmove', touchMove, false);