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

Question

JyriG @JyriG

JavaScript

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

Привет всем!
Код с активным использованием функций с событиями мышкой так далее не работает в планшетах.

Код хорош, однако как его адаптировать под прикосновения? Можно ли такое сделать не меняя особо функционал кода?

КОД:

var box_right = document.getElementById("box_right");
var boxWrapper = document.getElementById("box-wrapper");

var right_mm = document.querySelector('.box__right_mm');
var right_decor = document.querySelector('.box__right_rightdecor');

var r_initX, r_initY, r_mousePressX, r_mousePressY, r_initW, r_initH, r_initRotate;
document.querySelector("#box-wrapper > div.drawarea__control.drawarea__bottom > div > div.box__right_rightdecor.box__decor").style.opacity = "0";



function r_repositionElement(x, y) {

    boxWrapper.style.left = x;

    boxWrapper.style.top = y;

}



function r_resize(w, h) {
    // box_right.style.width = (w * (parseFloat(document.querySelector("#box_h").value)/parseFloat(document.querySelector("#box_w").value))) + 'px';
    // box_right.style.height = h + 'px';
    // boxWrapper.style.width = w;
    // boxWrapper.style.height = h;
    // right_mm.value =+ ( w - 44 ) * 10 * ((parseFloat(document.querySelector("#box_h").value)/parseFloat(document.querySelector("#box_w").value)));
    // right_decor.style.width = ( w - 44  ) + 'px';


    box_right.style.maxWidth = (boxWrapper.offsetWidth + 40) + 'px';
    box_right.style.width = (w * (parseFloat(document.querySelector("#box_h").value)/parseFloat(document.querySelector("#box_w").value))) + 'px';
    box_right.style.height =  100 + "%";
   
    boxWrapper.style.width = w;
    boxWrapper.style.height = h;
    
    right_mm.value =+ ((-40 + parseFloat(box_right.offsetWidth))/(parseFloat(boxWrapper.offsetWidth))) * parseFloat(document.querySelector("#box_w").value);
    
    right_decor.style.width = (-40 + parseFloat(box_right.offsetWidth)) + 'px';
    right_decor.style.left = "0";
    right_decor.style.maxWidth = (box_right.offsetWidth) + 'px';

    drawarea__update_cord();
}









// handle r_resize

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



function r_resizeHandler(event, left = false, top = false, xr_resize = false, yr_resize = false) {

    r_initX = boxWrapper.offsetLeft;

    r_initY = boxWrapper.offsetTop;

    r_mousePressX = event.clientX;

    r_mousePressY = event.clientY;



    r_initW = box_right.offsetWidth;

    r_initH = box_right.offsetHeight;



    function eventMoveHandler(event) {

        var wDiff = event.clientX - r_mousePressX;

        var hDiff = event.clientY - r_mousePressY;



        var newW = r_initW, newH = r_initH, newX = r_initX, newY = r_initY;



        if (xr_resize) {

            if (left) {

                newW = r_initW - wDiff;

                newX = r_initX + wDiff;

            } else {

                newW = r_initW + wDiff;

            }

        }



        if (yr_resize) {

            if (top) {

                newH = r_initH - hDiff;

                newY = r_initY + hDiff;

            } else {

                newH = r_initH + hDiff;

            }

        }

        if (document.querySelector("#box_right").style.width == '44px') {
          document.querySelector("#box-wrapper > div.drawarea__control.drawarea__bottom > div > div.box__right_rightdecor.box__decor").style.opacity = "0";
        }
        else {
            document.querySelector("#box-wrapper > div.drawarea__control.drawarea__bottom > div > div.box__right_rightdecor.box__decor").style.opacity = "1";
        }



        r_resize(newW, newH);

        r_repositionElement(newX, newY);

    }



    window.addEventListener('mousemove', eventMoveHandler, false);



    window.addEventListener('mouseup', function () {

        window.removeEventListener('mousemove', eventMoveHandler, false);

    }, false);

}





bottomMid.addEventListener('mousedown', e => r_resizeHandler(e, true, false, true, false));