我想将一个名为moveMe的元素拖放到窗口内的任何位置。此代码已在使用台式机的Google chrome上运行。但是,当我在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的以下答案很有用:HTML5 Drag and Drop API on Touch Screen Devices

关于javascript - 如何使此代码适用于iPad等触摸屏设备?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5716692/

10-08 23:20