I’m planning on creating an app which will utilise Phonegap, however the app is heavily based around dragging and dropping images or elements.
Is this possible using any of the available JavaScript libraries? (JQuery, Sencha Touch etc) and has anyone actually got this working on a mobile device?
As an update:
I have tested this on a regular desktop browser and it works fine. The application also compiles and runs on an Android phone, however the shape is not draggable. Anyone have any suggestions?
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script src="jquery-1.6.2.min.js"></script>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".shape").draggable();
});
</script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
alert("phonegap works");
$(".shape").draggable();
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header Title</h1>
</div>
<div data-role="content">
<img class="shape" src="images/150x150.gif" />
</div>
</div>
<div data-role="page" id="general">
<div data-role="header">
<h1>Header title</h1>
</div>
<div data-role="content">
</div>
</div>
</div>
</body>
</html>
I have several apps built using jQuery / jQuery UI Draggable + Phonegap and they work great.
I would suggest you start there; good luck!