JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
 
        <title>Тест</title>
    <style>
        *{margin:0px;padding:0px;}
        html,body{height:100%;}
        #middle
        {
            display:table;
            width:100%;
            height:100%;
        }
        #content
        {
            display:table-cell;
            padding:2%;
            width:61%;
        }
 
        #sidebar
        {
            display:table-cell;
            padding:2%;
            width:31%;
            background:#ddd;
        }
        #div_main {
    z-index:2;
    position:absolute;
    top:50px;
    left:100px;
    height:12%;
    width:12%;
    border:solid 1px #D6D3D6;
  }
  #div_img {
    z-index:1;
    right:0px;
    bottom:0px;
    position:absolute;
    width: 20px;
    height: 20px;
    background: url('img/Repeat.png') no-repeat;
    cursor:se-resize;
}
    </style>
	<script src="обработчик переноса.js"></script>
	<script>
    DragManager.onDragCancel = function(dragObject) {
      dragObject.avatar.rollback();
    };
    function color(c) {document.body.style.backgroundColor=c}

  </script>
  <script>
  function hook(e) {
  //var el = e.srcElement || e.target;
  var el = document.getElementById("div_main");
  el.startX = (e.type == 'mousedown') ? (e.clientX - el.offsetWidth) : 0;
  el.startY = (e.type == 'mousedown') ? (e.clientY - el.offsetHeight) : 0;
}
function move(e) {
  //var el = e.srcElement || e.target;
  var el = document.getElementById("div_main");
  
  if(el.startX)
    el.style.width = e.clientX - el.startX + 'px';
  
  if(el.startY)
    el.style.height = e.clientY - el.startY + 'px';
  
  (e.preventDefault) ? e.preventDefault() : e.returnValue = false;
}
  
if(!document.attachEvent) {
  document.attachEvent = function(e, f) {
    this.addEventListener(e.substr(2), f, false);
  }
}
document.attachEvent('onmouseup',...

JavaScript

var DragManager = new function() {

  /**
   * составной объект для хранения информации о переносе:
   * {
   *   elem - элемент, на котором была зажата мышь
   *   avatar - аватар
   *   downX/downY - координаты, на которых был mousedown
   *   shiftX/shiftY - относительный сдвиг курсора от угла элемента
   * }
   */
  var dragObject = {};

  var self = this;

  function onMouseDown(e) {

    if (e.which != 1) return;

    var elem = e.target.closest('.draggable');
    if (!elem) return;

    dragObject.elem = elem;

    // запомним, что элемент нажат на текущих координатах pageX/pageY
    dragObject.downX = e.pageX;
    dragObject.downY = e.pageY;

    return false;
  }

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

    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;
      }

      // начинаем перенос
      dragObject.avatar = createAvatar(e); // создать аватар
      if (!dragObject.avatar) { // отмена переноса, нельзя "захватить" за эту часть элемента
        dragObject = {};
        return;
      }

      // аватар создан успешно
      // создать вспомогательные свойства shiftX/shiftY
      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 = e.pageY - dragObject.shiftY + 'px';

    return false;
  }

  function onMouseUp(e) {
    if (dragObject.avatar) { // если перенос идет
      finishDrag(e);
    }

    // перенос либо не начинался, либо завершился
    // в...