Question

我是移动触控事件的新手。我试图让这个代码在移动设备上工作，但我担心我只是在浪费我的时间。我不想添加某种库，只是vanilla javascript。

我在div中移动的路线图。

有任何提示吗？

祝你好运，基督教

function startDrag(e) {
            // determine event object
            if (!e) {
                var e = window.event;
            }

                if(e.preventDefault) e.preventDefault();


            // IE uses srcElement, others use target
            targ = e.target ? e.target : e.srcElement;

            if (targ.className != 'roadmap') {return};
            // calculate event X, Y coordinates
                offsetX = e.clientX;
                offsetY = e.clientY;

            // assign default values for top and left properties
            if (!targ.style.left) { targ.style.left='-140px'};
            if (!targ.style.top) { targ.style.top='-300px'};

            // calculate integer values for top and left 
            // properties
            coordX = parseInt(targ.style.left);
            coordY = parseInt(targ.style.top);
            drag = true;

            // move div element
                document.ontouchmove=dragDiv;
            return false;

        }
        function dragDiv(e) {
            if (!drag) {return};
            if (!e) { var e= window.event};

            // target
            console.log(e.target)
            var t = e.target,
                    img = t,
                    parent = img.parentElement,
                    imgWidth = img.clientWidth,
                    imgHeight = img.clientHeight;

            // maxes
            var y = coordY+e.clientY-offsetY,
                    x = coordX+e.clientX-offsetX;

            // set boundies
            if ( parent.clientHeight == null ) {
                parent.clientHeight = 1;
                targ.style.left=1+'px';
            }
            var imgBottom = parent.clientHeight-imgHeight
                    imgRight = parent.clientWidth-imgWidth;

            // stop drag on overflow
            if (    // left
                        /^-\d+$/.test(y) &&
                        // // top
                        /^-\d+$/.test(x) &&
                        // // bottom
                        imgBottom < y    &&
                        // // bottom
                        imgRight < x
                        ) {

                targ.style.left=coordX+e.clientX-offsetX+'px';
                targ.style.top=coordY+e.clientY-offsetY+'px';

            };
            return false;
        }
        function stopDrag() {
            drag=false;
        }


        window.onload = function() {
            document.onmousedown = startDrag;
            document.onmouseup = stopDrag;

            // mobile
            document.addEventListener("touchmove", startDrag, false);
            document.addEventListener("touchend", stopDrag, false);
        }

Answer 1

尝试使用'touchstart'事件而不是'touchmove'：

document.addEventListener("touchstart", startDrag, false);
document.addEventListener("touchend", stopDrag, false);

然后设置'offsetX'和'offsetY'变量以使用鼠标或触摸坐标：

 offsetX = e.clientX || e.touches[0].clientX;
 offsetY = e.clientY || e.touches[0].clientY;

希望这有帮助。

如何让mousemove成touchmove？

1 个答案: