Как сделать JS функцию для планшетов?

Question

JyriG @JyriG

JavaScript

Как сделать JS функцию для планшетов?

Как сделать функцию такой, чтобы работала на планшетах?
Видео с эмулятора: https://skr.sh/vClzNNwMdQR?a

var box_upper = document.getElementById("box_upper");
var boxWrapper = document.getElementById("box-wrapper");
var upper_mm = document.querySelector('.box__upper_mm');
var upper_decor = document.querySelector('.box__upper_upperdecor');
var initX, initY, mousePressX, mousePressY, initW, initH, initRotate;
document.querySelector("#box-wrapper > div.drawarea__control.drawarea__left > div > div.box__upper_upperdecor.box__decor").style.opacity = "0";

function repositionElement(x, y) {
    boxWrapper.style.left = x;
    boxWrapper.style.top = y;
}

function resize(w, h) {
    box_upper.style.width = w + 'px';
    box_upper.style.height = h + 'px';
    boxWrapper.style.width = w; 
    boxWrapper.style.height = h;
    upper_mm.innerHTML =+ ( h - 44 ) * 10;
    upper_decor.style.right = 21 + 'px';
    upper_decor.style.width = ( h - 44  ) + 'px';
     
}





function getCurrentRotation(el) {
    var st = window.getComputedStyle(el, null);
    var tm = st.getPropertyValue("-webkit-transform") ||
        st.getPropertyValue("-moz-transform") ||
        st.getPropertyValue("-ms-transform") ||
        st.getPropertyValue("-o-transform") ||
        st.getPropertyValue("transform")
    "none";
    if (tm != "none") {
        var values = tm.split('(')[1].split(')')[0].split(',');
        var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
        return (angle < 0 ? angle + 360 : angle);
    }
    return 0;
}

function rotateBox(deg) {
    boxWrapper.style.transform = `rotate(${deg}deg)`;
}

// handle resize

var bottomMid = document.getElementById("box_upper__bottom-mid");

function resizeHandler(event, left = false, top = false, xResize = false, yResize = false) {
    initX = boxWrapper.offsetLeft;
    initY = boxWrapper.offsetTop;
    mousePressX = event.clientX;
    mousePressY = event.clientY;
    initW = box_upper.offsetWidth;
    initH = box_upper.offsetHeight;
    initRotate = getCurrentRotation(boxWrapper);

    function eventMoveHandler(event) {
        var wDiff = event.clientX - mousePressX;
        var hDiff = event.clientY - mousePressY;
        var newW = initW, newH = initH, newX = initX, newY = initY;
        if (xResize) {

          if (left) {
                newW = initW - wDiff;
                newX = initX + wDiff;
            } else {
                newW = initW + wDiff;
            }
        }

        if (yResize) {
            if (top) {
                newH = initH - hDiff;
                newY = initY + hDiff;
            } else {
                newH = initH + hDiff;
            }
        }

        if (document.querySelector("#box_upper").style.height == '44px') {
          document.querySelector("#box-wrapper > div.drawarea__control.drawarea__left > div > div.box__upper_upperdecor.box__decor").style.opacity = "0";
        } else {
           document.querySelector("#box-wrapper > div.drawarea__control.drawarea__left > div > div.box__upper_upperdecor.box__decor").style.opacity = "1";
        }

        resize(newW, newH);
        repositionElement(newX, newY);
    }

    window.addEventListener('mousemove', eventMoveHandler, false);
    window.addEventListener('mouseup', function () {
        window.removeEventListener('mousemove', eventMoveHandler, false);
    }, false);

    window.addEventListener('touchmove', eventMoveHandler, false);
    window.addEventListener('touchstart', function () {
        window.removeEventListener('touchmove', eventMoveHandler, false);
    }, false);
}
bottomMid.addEventListener('touchend', e => resizeHandler(e, false, false, false, true));
bottomMid.addEventListener('mousedown', e => resizeHandler(e, false, false, false, true));