JSFiddle - React, Tailwind, and code Playground

dragg

by Dave

HTML

<div id="0" class="ObjMainBack">
  
 <div id="MainBackObj1" class="ObjMidBack">

  <div class="ObjBlind"></div>

   <button id="aaa" class="ObjContent ObjBut1">gggg</button>

 </div>
</div>






<div id='zzz' class="zz" style="width:100px;border:1px solid black;position:absolute;top:50px;left:100px;">0</div>

CSS

.ObjMainBack {
  width:100%;
  height:100%;
  background:red;
  position:absolute;
  top:0px;
  left:0px;
  }
.ObjMidBack {
  position:absolute;
  max-width:100%;
  max-height:100%;
overflow:hidden;
  }
.ObjContent {
  width:100%;
  height:100%;
}
.ObjBlind {
  position:absolute;
  min-width:100%;
  min-height:100%; 
  margin: 0;
  background:#000;
  opacity:.10;
  display:none;
  /**/
  }

JavaScript

document.getElementById('aaa').onclick = (function(){
alert("rg")
});
//var lastX,lastY,cursorX,cursorY;

window.addEventListener('mousemove', function(e){
    //cursorX = e.pageX;
    //cursorY = e.pageY;
    zzz.innerHTML = e.pageX;
    document.getElementById('MainBackObj1').style.width = e.pageX + "px";
    
})