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

//esta função irá pegar o ID das imagens, para fazer a troca das imagens de acordo com o id delas

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

function drag(obj){
	var zIndexImg = 0;
    //com a var id, eu detecto qual imagem está sendo arrastada
	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++;
            
            //faço o drag das imagens
            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){
//esta função realizara a troca das imagens                
	img.removeAttribute('style');
    
    //atribuo as imagens e as divs em que estao guardadas em variaveis
	var imgDiv = document.getElementById(div1);
	var imgDiv_2 = document.getElementById(div2);
	var imgId = document.getElementById(id1);
	var imgId2 = document.getElementById(id2);
    
    //pego o id de ambas imagens
	var getId = imgId.getAttribute('id');
	var getId2 = imgId2.getAttribute('id');
	
    //faço a troca dos ids
    imgId.setAttribute('id',getId2);
	imgId2.setAttribute('id',getId);

//e sobreponho as imagens nas divs, fazendo a troca
imgDiv.innerHTML = imgId2.cloneNode().outerHTML;
imgDiv_2.innerHTML = imgId.cloneNode().outerHTML;
			}

function drop(e){
//esta função é para quando soltar as imagens
	dropImage(e);
    //removo os eventos adicionados
document.removeEventListener('mousemove' ,dropImage);
			document.removeEventListener('mouseup', drop);

//descubro qual a imagem clicada para fazer a troca
if(img.style.left >= '90px' && img.style.left <= '130px'){
    //pego o ID para saber qual a imagem
	if(pegaId(obj) == 'teste1'){
   ...