Dragging Elements - Touch Devices

//IF UNITS OTHER THAN PX
let _dummydiv= create("div");
_dummydiv.id= "dummydiv";
document.body.append(_dummydiv);
let dummydiv= select("#dummydiv");

let root= document.documentElement;
let docwidth= Math.max(
root["clientWidth"],
//document.body["scrollWidth"],
//root["scrollWidth"],
document.body["offsetWidth"],
root["offsetWidth"]
);

let docheight= Math.max(
root["clientHeight"],
//document.body["scrollHeight"],
//root["scrollHeight"],
document.body["offsetHeight"],
root["offsetHeight"]
);

function drag(element,width,height,e){
e.preventDefault();
let touchLocation = e.targetTouches[0];
let x= touchLocation.pageX || e.pageX;
let y= touchLocation.pageY || e.pageY;

//PX & VW & OTHER UNITS
dummydiv.style.cssText= `display: none;
width: calc(${docwidth}px - ${width});
height: calc(${docheight}px - ${height})`;

let maxwidth= +getComputedStyle(dummydiv).width.replace("px","");
let maxheight= +getComputedStyle(dummydiv).height.replace("px","");


//PX UNIT ONLY
let maxwidth= docwidth-width;
let maxheight= docheight-height;

if(x<=0){
element.style.left= 0;
}
else if(x>=maxwidth){
element.style.left= maxwidth+"px";
}
else element.style.left= x+"px";

if(y<=0){
element.style.top= 0;
}
else if(y>=maxheight){
element.style.top= maxheight+"px";
}
else element.style.top= y+"px";


}


//Calling the function------------
dragger.ontouchmove= function(e){
drag(element,width,height,e);
};

dragger.onmousemove= function(e){
drag(element,width,height,e);
};


@@@@@@@@@@@@
Parameters:
e=> event (leave as it is)
element=> the target element to be dragged
//Should have position absolute or fixed and
//No declaration for top left right bottom
width=> width of target element
height=> height of target element
//width & height in pixels but leave out the unit

dragger=> element that drags the target element
//could be the element itself (element=this)
//could be another element e.g drag button or bar
//that is a child of the the target element
//or sibling element close to the target element