JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<img src="img/cat.jpg" id="cat" class="cat">
	<img src="img/mouse.png" id="mouse" class="mouse">
	<script src="js/cat.js"></script>

CSS

.cat {
width: 40px;
height: 40px;
cursor: pointer;
left: 20px; 
top: 20px;
z-index: 0;
}

.mouse {
width: 25px;
height: 25px;
cursor: pointer;
left: 60px; 
top: 60px;
z-index: 0;
}

JavaScript

var cat = document.getElementById('cat');
var mouse = document.getElementById('mouse');

/*-----Cat-----*/

cat.onmousedown = function(c) {

 var catObj = this;

  var coordsCat = getCoords(catObj);
  var shiftXCat = c.pageX - coordsCat.left;
  var shiftYCat = c.pageY - coordsCat.top;

  catObj.style.position = 'absolute';
  document.body.appendChild(catObj);
  moveAt(c);

  catObj.style.zIndex = 1000;

  function moveAt(c) {
    catObj.style.left = c.pageX - shiftXCat + 'px';
    catObj.style.top = c.pageY - shiftYCat + 'px';
  }

  document.onmousemove = function(c) {
    moveAt(c);
  };

  catObj.onmouseup = function() {
    document.onmousemove = null;
    catObj.onmouseup = null;
  };

}

cat.ondragstart = function() {
  return false;
};

function getCoords(elem) {
  var boxСat = elem.getBoundingClientRect();
  return {
    top: boxСat.top + pageYOffset,
    left: boxСat.left + pageXOffset
  };
}

/*-----mouse-----*/

mouse.onmousedown = function(m) {

 var mouseObj = this;

  var coordsMouse = getCoords(mouseObj);
  var shiftXMouse = m.pageX - coordsMouse.left;
  var shiftYMouse = m.pageY - coordsMouse.top;

  mouseObj.style.position = 'absolute';
  document.body.appendChild(mouse);
  moveAt(m);

  this.style.zIndex = 1000;

  function moveAt(m) {
    mouseObj.style.left = m.pageX - shiftXMouse + 'px';
    mouseObj.style.top = m.pageY - shiftYMouse + 'px';
  }

  document.onmousemove = function(m) {
    moveAt(m);
  };

  mouseObj.onmouseup = function() {
    document.onmousemove = null;
    mouse.onmouseup = null;
  };

}

mouse.ondragstart = function() {
  return false;
};