JSFiddle - React, Tailwind, and code Playground

by Jacques Vincilione

HTML

<div id="wrap">
  <div class="region"></div>
  <div id='elem' onmousedown='tzdragg.startMoving(event);' onmouseup='tzdragg.stopMoving();' >
  </div>
  <div id="mask">
  </div>
</div>

CSS

body {
  width: 100%;
  height: 100%;
}
#mask {
  background: rgba(0,0,0,.5);
  width:100%;
  height: 100%;
  position: relative;
}

#wrap {
  position: relative;
  top:100px;
  left: 100px;
  width: 550px;
  height: 300px;
  border: 1px solid #000;
  overflow: hidden;
}

.region {
  position: relative;
  top:50px;
  left: 50px;
  width: 450px;
  height: 200px;
  border: 1px solid #000;
  background: #fff;
}
#elem{
  position: relative;
  width: 400px;
  height: 200px;
  background-color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;     
  user-select: none;
  cursor: default;
}

JavaScript

// Coded by TheZillion in a quarter of an hour. [thezillion.wordpress.com]
            function $(el){
                return document.getElementById(el);
            }
            var tzdragg = function(){
                return {
                    move : function(divid,xpos,ypos){
                        var a = $(divid);
                        $(divid).style.left = xpos + 'px';
                        $(divid).style.top = ypos + 'px';
                    },
                    startMoving : function(evt){
                        evt = evt || window.event;
                        var posX = evt.clientX,
                            posY = evt.clientY,
                            a = $('elem'),
                        divTop = a.style.top,
                        divLeft = a.style.left;
                        divTop = divTop.replace('px','');
                        divLeft = divLeft.replace('px','');
                        var diffX = posX - divLeft,
                            diffY = posY - divTop;
                        document.onmousemove = function(evt){
                            evt = evt || window.event;
                            var posX = evt.clientX,
                                posY = evt.clientY,
                                aX = posX - diffX,
                                aY = posY - diffY;
                            tzdragg.move('elem',aX,aY);
                        }
                    },
                    stopMoving : function(){
                        var a = document.createElement('script');
                        document.onmousemove = function(){}
                    },
                }
            }();