JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://www.obrotu.com/demo/dragresize.js"></script>

<div class="drsElement drsMoveHandle" style="left: 140; top: 190px; width: 40px; height: 30px; text-align: center;"><img  id='dragged' src="http://www.obrotu.com/demo/4691.eps">
</div>

CSS

.drsElement {
 position: absolute;
 border: 1px solid #333;
}

.drsMoveHandle {
 height: 20px;
 background-color: #CCC;
 border-bottom: 1px solid #666;
 cursor: move;
}
.dragresize {
 position: absolute;
 width: 5px;
 height: 5px;
 font-size: 1px;
 background: #EEE;
 border: 1px solid #333;
}
.dragresize-tl {
 top: -8px;
 left: -8px;
 cursor: nw-resize;
}
.dragresize-tm {
 top: -8px;
 left: 50%;
 margin-left: -4px;
 cursor: n-resize;
}
.dragresize-tr {
 top: -8px;
 right: -8px;
 cursor: ne-resize;
}

.dragresize-ml {
 top: 50%;
 margin-top: -4px;
 left: -8px;
 cursor: w-resize;
}
.dragresize-mr {
 top: 50%;
 margin-top: -4px;
 right: -8px;
 cursor: e-resize;
}

.dragresize-bl {
 bottom: -8px;
 left: -8px;
 cursor: sw-resize;
}
.dragresize-bm {
 bottom: -8px;
 left: 50%;
 margin-left: -4px;
 cursor: s-resize;
}
.dragresize-br {
 bottom: -8px;
 right: -8px;
 cursor: se-resize;
}

JavaScript

var dragresize = new DragResize('dragresize',
{ minWidth: 50, minHeight: 50, minLeft: 140, minTop: 100, maxLeft: 380, maxTop: 450 });

dragresize.isElement = function(elm)
{
 if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function(elm)
{
 if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};
dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) {
    var img = document.getElementById('dragged');
    img.height = this.elmH;
    img.width = this.elmW;
};
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };
dragresize.apply(document);