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

Question

I want to drag an element named moveMe and drop it anywhere within the window. This code already works on google chrome using a desktop computer. But when i opened this file in an iPad, it is not functioning. I had researched about ontouchstart, ontouchmove and ontouchend and applied it to this code but still it doesn't work. Please help me on how to get this code work on an iPad without using jQuery because iPad is not good at handling jQuery. And if there is a more efficient way to do this.

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";
    }

"iPad is not good at handling jQuery". Really? – Adam Hopkinson Apr 19 '11 at 12:58 — Adam Hopkinson, Apr 19 '11 at 12:58
@adam: I'ts response is too slow when using jQuery – taysh Apr 19 '11 at 14:13 — taysh, Apr 19 '11 at 14:13

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

You might find this answer about HTML5 Drag and Drop API on Touch Screen Devices useful: HTML5 Drag and Drop API on Touch Screen Devices

edited May 23 '17 at 10:33

Community

1
1

answered Apr 19 '11 at 13:08

NimmoNet

994
2
10
18

But the implementation here uses jQuery right? Is there any way of doing a drag and drop function without using jQuery? – taysh Apr 19 '11 at 14:14

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

1 Answers1