-1

HTMLページでDIVタグをドラッグして移動するために使用されるプレーンなJavaScriptがあります。これは、マウスの移動、マウスの上下のイベントで正常に機能します。これを拡張して、タッチデバイス（iPhone）で機能するようにします。私がそれをするのを手伝ってください

 if (document.getElementById) {

        (function () {

            var n = 500;
            var dragok = false;
            var y, x, d, dy, dx;

            function move(e) {
                if (!e) e = window.event;
                if (dragok) {
                    d.style.left = dx + e.clientX - x + "px";
                    d.style.top = dy + e.clientY - y + "px";
                    return false;
                }
            }

            function down(e) {
                if (!e) e = window.event;
                var temp = (typeof e.target != "undefined") ? e.target : e.srcElement;
                if (temp.tagName != "HTML" | "BODY" && temp.className != "dragclass") {
                    temp = (typeof temp.parentNode != "undefined") ? temp.parentNode : temp.parentElement;
                }
                if (temp.className == "dragclass") {
                    dragok = true;
                    temp.style.zIndex = n++;
                    d = temp;
                    dx = parseInt(temp.style.left + 0);
                    dy = parseInt(temp.style.top + 0);
                    x = e.clientX;
                    y = e.clientY;
                    document.onmousemove = move;
                    return false;
                }
            }

            function up() {
                dragok = false;
                document.onmousemove = null;
            }

            document.onmousedown = down;
            document.onmouseup = up;

            document.body.addEventListener("touchstart", down, true);
            document.body.addEventListener("touchcancel", up, true);
            document.body.addEventListener("touchmove", move, true);


        })();
4

1 に答える 1

0

イベントがあります：touchstart、touchmove、およびtouchend。彼らは同じように動作します

https://developer.mozilla.org/en-US/docs/DOM/Touch_events

これを実装する最善の方法は、Modernizr などのライブラリを使用して、ブラウザーがタッチできるかどうかをテストすることです。

var isTouch = "ontouchstart" in window;

if(isTouch){
   el.addEventListener('touchstart', handlerStart);
   el.addEventListener('touchmove', handlerMove);
   el.addEventListener('touchend', handlerEnd);
} else{
   el.addEventListener('mousedown', handlerStart);
   el.addEventListener('mousemove', handlerMove);
   el.addEventListener('mouseup', handlerEnd);
}

やりたいことの複雑さに応じて、ハンドラーは両方の状況で同じになる可能性がありますが、おそらくマウスとタッチには異なるハンドラーを使用する必要があります

于 2013-02-25T18:23:07.460 に答える