我想将一个名为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/