JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<!--<div id="handle_left" class="handle">
</div>
<div id="handle_top" class="handle">
</div>
<div id="handle_bottom" class="handle">
</div>
<div id="handle_right" class="handle">
</div>
<div id="handle_left_top" class="handle">
</div>
<div id="handle_right_top" class="handle">
</div>
<div id="handle_left_bottom" class="handle">
</div>
<div id="handle_right_bottom" class="handle">
</div>
<div id="area">
</div>-->

CSS

body{
  touch-action:none;
  overflow:hidden;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.handle{
  position:absolute;
  background:black;
  width:50px;
  height:50px;
  cursor: move;
  z-index:50;
  touch-action:none;
 }
 #area{
   position:absolute;
    background:yellow;
    cursor: move;
 }
 
 .area{
   position:absolute;
 }

JavaScript

function logInfo(info){
	$("body").append(info+"<br/>");
}
function ChangeableElement(element_id,classname,parent) {
		$( parent ).append( "<div id=\""+element_id+"\" class=\""+classname+"\"></div>" );
    this.element_id = element_id;
    this.jqelement = $("#"+element_id);
    this.top = function(){
    	return this.jqelement.position().top;
    };
    this.left = function(){
    	return this.jqelement.position().left;
    };
    this.height = function(){
    	return this.jqelement.height();
    };
    this.width = function(){
    	return this.jqelement.width();
    };
    this.css = function(o){
    	this.jqelement.css(o);
      this.updated(this.left(),this.top(),this.width(),this.height());
    };
    this.moveXY=function(dx,dy){};
    this.updated=function(left,top,width,height){ };
  
  if (window.PointerEvent) {
      this.jqelement.on("pointerdown",function(ev){
      	logInfo("pointerdown");
        this.lastX=ev.pageX;
        this.lastY=ev.pageY;
      }.bind(this));
      $(document).on("pointermove",function(ev){
        if(!this.lastX || !this.lastY)
          return;   
        logInfo("pointermove");
        this.moveXY(ev.pageX-this.lastX,ev.pageY-this.lastY);
        this.lastX=ev.pageX;
        this.lastY=ev.pageY;
      }.bind(this));
      $(document).on("pointerup",function(ev){
      	logInfo("pointerup");
        this.lastX=undefined;
        this.lastY=undefined;
      }.bind(this));
  }else{
    this.jqelement.on("touchstart",function(ev){
				console.log("Down:"+ev.pageX+"-"+ev.clientX+"-"+ev.screenX);
				ev.preventDefault();
				this.lastX=ev.originalEvent.touches[0].pageX;
				this.lastY=ev.originalEvent.touches[0].pageY;
			}.bind(this));
			$(document).on("touchmove",function(ev){
				console.log("Move1:"+ev.pageX+"-"+ev.clientX+"-"+ev.screenX);
				console.log("Move2:"+this.lastX);
				if(!this.lastX ||...