JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="element"  style=" top:50px;" id="move1">  
        <span style="background-color:red;"></span> 
  </div>

  <div class="element" style=" top:150px;" id="move2"> 
   <span style="background-color:blue;"></span> 
  </div>

CSS

.element{
    height:72px;
    position:absolute;
    top:92px;
    width:72px;
    border:1px solid red;
    left:300px;
}
span{
    height:72px;
    position:absolute;
    margin-left:40%;
    width:20%;
    height:20%;
    margin-top:40%;
}

JavaScript

var element = $('.element');
var i = 0; 
var length = element.length;
var ArrayOffsetDom = {}; 
valide = 0;
SaveMyID = undefined;


while(i != length) 
{
	/* Remplir les position de chaque elements dans le tableau ArrauoffsetDom */ 
  var id = element.eq(i).attr('id'); ArrayOffsetDom[id] = $('#'+id).offset();
  var keys = Object.keys(ArrayOffsetDom); 
  i++;
}

element.mousedown(function(e) {

  $(this).parent().prepend($(this));// code bullshit pour réglé un probleme 

  SaveMyID = $(this).attr('id'); $(this).attr('id', 'Select'); // je donne a l'element selectionner l'id Select

  $('.element').mouseover(function() 
  { 

  if($(this).attr('id') != 'Select') 
   { 
      selectID = $(this).attr('id');
      valide = 1;   
      $(".element").mouseleave(function()
      { 
      	valide = 0;  
      }); 
   }
  }); 

	$(document).mousemove(mouse); 
}); 

function mouse(evt) 
{ 
	var img = $('#' + "Select");
	// je centre mon element sur ma souri
	var width = img.width()/2;
	var height = img.height()/2;
	var mouse_x = evt.pageX ;
	var mouse_y = evt.pageY ;
	img.css("left",mouse_x - width);
  img.css("top",mouse_y - height); 
}

function switchElement(validee,save) // fonction qui echange les possition des element 
{
 					if(validee == 1) 
 						{
 							$("#"+selectID).animate({top: ArrayOffsetDom[save].top },{ duration:800, queue: false }); 
							$("#"+selectID).animate({left: ArrayOffsetDom[save].left}, { duration: 800, queue: false }); 
							$("#"+save).animate({top: ArrayOffsetDom[selectID].top },{ duration:800, queue: false }); 
							$("#"+save).animate({left: ArrayOffsetDom[selectID].left}, { duration: 800, queue: false });  
 
              var tpm = ArrayOffsetDom[selectID];  
							ArrayOffsetDom[selectID] = ArrayOffsetDom[save]; 
							ArrayOffsetDom[save] = tpm;
					}
}

$(document).mouseup(function()
{        
    $('#Select').attr('id',SaveMyID); //   je re donne l'identifiant initial que notre élément avait
		element.off( "mouseover" );...