jquery touch punch - draggable on ipad

dshuta picture dshuta · Mar 23, 2012 · Viewed 7k times · Source

i am starting to work with the jquery touch punch extensions in order to allow draggability on ipad, but i am getting tripped up right away. probably something terribly dumb on my part. the draggable example from the developer works fine on my ipad:

http://furf.com/exp/touch-punch/draggable.html

this works fine in my desktop browser, but on the ipad it just focuses on the block and scrolls the entire page as i drag, as if it were just an image or other normal embedded object. as this is what happens normally with jquery/ui on ipad, this makes me think it is not loading or otherwise ignoring the "punch" code from my site (though if i host the jquery files on my site via the same path, those load and function fine in desktop browser). here's the entire code, very basic:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Touchpunchtest</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
</head>
<body>
<div id="draggybox" onclick="void(0)" style="width: 150px; height: 150px; background: green;"></div>
<script>$('#draggybox').draggable();</script>
</body>
</html>

what am i missing?!

Answer

AJak picture AJak · Mar 23, 2012

If the project is downloaded from GIT hub, it seems to be fine. Not sure where you got your jquery.ui.touch-punch.js file from, but it seems to error. Your browser probably compensates for it, but the iPad browser does not.