如何使这段代码适用于像iPad这样的触摸屏设备

How to make this code work for a touchscreen device like an iPad?

本文关键字：iPad 触摸屏 适用于 段代码 何使这 代码      更新时间：2023-09-26

我想拖动一个名为moveMe的元素，并将其放在窗口内的任何位置。这段代码已经在使用台式电脑的谷歌浏览器上工作。但当我在iPad上打开这个文件时，它无法运行。我已经研究了ontouchstart, ontouchmove和ontouchend，并将其应用于此代码，但仍然不起作用。请帮助我如何在不使用jQuery的情况下在iPad上获得此代码，因为iPad不擅长处理jQuery。如果有更有效的方法来做到这一点。

function init() {
    movMeId=document.getElementById("moveMe");
    movMeId.style.left="900px"; 
    movMeId.style.top="500px";
    }
document.onmousedown=coordinates;
document.onmouseup=mouseup;
function coordinates(e) {
    if (!e) {
    e = window.event;
    }
    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
    if (sender.id == "moveMe") {
        mouseover=true;
        pleft = parseInt(movMeId.style.left);
        ptop = parseInt(movMeId.style.top);
        xcoor = e.clientX;
        ycoor = e.clientY;
        document.onmousemove = moveImage;
        return false;
        }
    else {
        return false;
        }
    }
function moveImage(e) {
    if (!e) {
        e = window.event;}
        movMeId.style.left = pleft + e.clientX - xcoor + "px";
        movMeId.style.top = ptop + e.clientY - xcoor + "px";
        return false;
    }
function mouseup(e) {
    document.onmousemove=null;
    movMeId.style.left="900px"; 
    movMeId.style.top="500px";
    }

你可能会发现这个关于触摸屏设备上的HTML5拖放API的答案很有用:

相关文章：