JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imgs">
    <div id="img1">
        <img src='http://gabrielozzy.com/site-amor/img/slide_1.jpg' id="teste1" class="slides-adm" onmousemove="drag(this)" onmousedown="pegaId(this)" />
    </div>
        <div id="img2">
        <img src='http://gabrielozzy.com/site-amor/img/slide_2.jpg' id="teste2" class="slides-adm" onmousemove="drag(this)" onmousedown="pegaId(this)" />
    </div>
        <div id="img3">
        <img src='http://gabrielozzy.com/site-amor/img/slide_3.jpg' id="teste3" class="slides-adm" onmousemove="drag(this)" onmousedown="pegaId(this)" />
    </div>
</div>

CSS

.slides-adm{
	top:0;
	left:0;
	float:left;
	height:30%;
	width:29%;
	margin-left:15px;
	position:relative;
}

JavaScript

//This function will give me the ID of the images, so i can make my conditions according to the ID
var enabled = true;

function pegaId(obj){
	var idCorreto = obj.getAttribute('id');
	return idCorreto;
}

if(enabled == true){
function drag(obj){
	var zIndexImg = 0;
    //with the var id, i detect which image is being dragged by the id
	var id = obj.getAttribute('id');

	var img = document.getElementById(id);
	var imgPositionLeft = img.offsetLeft;
	var imgPositionTop = img.offsetTop;

		img.ondragstart = function(){
			return false;
		};
        
		function dropImage(e){
			img.style.transition = "";
			img.style.zIndex = zIndexImg++;
            
            //make the drag of the imgs
            img.style.top = e.clientY - imgPositionTop +'px';
			img.style.left = e.clientX - imgPositionLeft + 'px';
            
            console.log(e.clientX - imgPositionLeft);
		}

function change(id1,id2,div1,div2){
//this function will make the change of the imgs                
	img.removeAttribute('style');
    
    //i put the imgs and the divs they are kept in these vars
	var imgDiv = document.getElementById(div1);
	var imgDiv_2 = document.getElementById(div2);
	var imgId = document.getElementById(id1);
	var imgId2 = document.getElementById(id2);
    
    //take the id of both imgs
	var getId = imgId.getAttribute('id');
	var getId2 = imgId2.getAttribute('id');
	
    //and change the id's
    imgId.setAttribute('id',getId2);
	imgId2.setAttribute('id',getId);

//and overwrite the imgs in the divs, making the change
imgDiv.innerHTML = imgId2.cloneNode().outerHTML;
imgDiv_2.innerHTML = imgId.cloneNode().outerHTML;
			}

function drop(e){
//this function is for the drop of the img
	dropImage(e);
    //remove the added events
document.removeEventListener('mousemove' ,dropImage);
			document.removeEventListener('mouseup', drop);

//find out which image is clicked so i can make the right change
if(img.style.left >= '90px' && img.style.left <= '130px'){
    //take the ID so i...