JSFiddle - React, Tailwind, and code Playground

HTML

<section></section>
<img src="http://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="">
<img src="https://cdn.fishki.net/upload/post/2017/03/19/2245758/tn/02-funny-cat-wallpapercat-wallpaper.jpg" alt="">
<img src="http://bipbap.ru/wp-content/uploads/2017/10/3-6.png" alt="">

CSS

section{
  min-height:150px;
  border:1px solid red;
}
img {
  cursor:move;
  width:200px;
  position:static;

}
.over {
  background:pink;
}

.move { 
  background: red;
  opacity : 0.4;
  border:2px blue;
  position:absolute;
}

JavaScript

let imgs = document.querySelectorAll('img');
let box = document.querySelector('section');

imgs.forEach(function(img){
img.ondragstart = function(){ return false; };
img.onmousedown = function(e){
    	img.dataset.x = e.offsetX;
      img.dataset.y = e.offsetY;
			img.style.left = e.pageX - e.offsetX + 'px';
			img.style.top = e.pageY - e.offsetY + 'px';
      this.classList.add('move');

};
});
window.addEventListener('mouseup', function(){
imgs.forEach(function(img){ img.classList.remove('move');});
});

window.addEventListener('mousemove', function(e){
let img = document.querySelector('.move');
if (!img) return false;
img.style.left = e.pageX - +img.dataset.x + 'px';
img.style.top = e.pageY - +img.dataset.y + 'px';
});