JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div id="one" draggable></div>
	<div id="two" draggable></div>
	<div id="three" draggable></div>
	<div id="four" draggable></div>
  </body>

CSS

*{
		margin: 0px;
		padding: 0px;
	}
	html {
		height: 100%;
	}
	body {
		background-color: #aef;
		height: 100%;
	}
	div {
		position: absolute;
		height: 80px;
		width: 80px;
		background-color: #fff;
		cursor:pointer;
	}
	#one {
		
		top:30px;
		left:30px;
		
	}
	#two {
		top:30px;
		left:130px;
		
	}
	#three {
		
		top:30px;
		left:230px;
		
	}
	#four {
		
		top:30px;
		left:330px;
		
	}

JavaScript

var drag = false;//чтобы клик не срабатывал, если есть drag
	var divs = document.getElementsByTagName('div');
	var len = divs.length;
	for(var i=0 ; i<len; i++) {
		divs[i].onclick = change;//меняет цвет
	}
	var isWorking = false;//чтобы не перезапускалось по клику пока не отработает
	function change (e){
		if(drag) {  drag = false; return;}
		if(isWorking) return;
		isWorking = true;
		e = fixEvent(e);
		var target = e.target;
		console.log(e.target.id);
		function changeColor() { 
			
			target.style.backgroundColor =  "rgb("+(255*Math.random()^0)+", "+(255*Math.random()^0)+", "+(255*Math.random()^0)+")" ;
			console.log('change');
};
	var inter = setInterval (changeColor , 100)	;
	function stopChange() {
			clearInterval(inter);
			isWorking = false;
	}
	setTimeout (stopChange, 1000);
	
	};


	var dragManager = new function() {

  var dragObject = {};
  var self = this;

  function onMouseDown(e){
    e = fixEvent(e);

    if (e.which != 1) return;

    var elem = findDraggable(e);
    if (!elem) return;

    dragObject.elem = elem;
    dragObject.downX = e.pageX;
    dragObject.downY = e.pageY;

    return false;
  }

  function onMouseMove(e) {
    if (!dragObject.elem) return; // элемент не зажат

    e = fixEvent(e);

    if ( !dragObject.avatar ) { 
      var moveX = e.pageX - dragObject.downX;
      var moveY = e.pageY - dragObject.downY;
      if ( Math.abs(moveX) < 3 && Math.abs(moveY) < 3 ) {        
        return;
      }
      drag = true;
      dragObject.avatar = createAvatar(e); 
      if (!dragObject.avatar) { 
        dragObject = {};
        return;
      }

      
      var coords = getCoords(dragObject.avatar);
      dragObject.shiftX = dragObject.downX - coords.left;
      dragObject.shiftY = dragObject.downY - coords.top;

      startDrag(e); // отобразить начало переноса
    }

    // отобразить перенос объекта при каждом движении мыши
    dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
    dragObject.avatar.style.top...