iScroll drag/drop problem
HTML
<script src="http://www.users.on.net/~mikeandgeminoz/code/yasldragupproblem/js/libs/jquery.ui.touch-punch.min.js"></script>
<script src="http://www.users.on.net/~mikeandgeminoz/code/yasldragupproblem/js/libs/iscroll.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: simple</title>
<style type="text/css" media="all">
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
font-family: helvetica;
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background-color: #d51875;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image: -moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image: -o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
}
#header a {
color: #f3f3f3;
text-decoration: none;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
...
JavaScript
var myUtils = {};
myUtils.preventDefaultTouchMove = function(e) {
e.preventDefault();
console.log("test");
}
function enableSort() {
$("#butSort").hide();
$("#butScroll").show();
try {
document.removeEventListener('touchmove', myUtils.preventDefaultTouchMove);
myUtils.myScroll.disable();
} catch(e) {
}
// Important. Restore overflow to #wrapper because
// iScroll overrides this.
$("#wrapper").css("overflow", "");
$("#itemsList").sortable({
handle : "label",
axis : 'y',
disabled : false
});
}
function enableScroll() {
$("#butSort").show();
$("#butScroll").hide();
$("#itemsList").sortable({
disabled : true
});
document.addEventListener('touchmove', myUtils.preventDefaultTouchMove, false);
switchOniScroll();
myUtils.myScroll.refresh();
}
function switchOniScroll() {
if ( typeof myUtils.myScroll === "undefined") {
myUtils.myScroll = new iScroll('wrapper');
} else {
myUtils.myScroll.enable();
}
}
$(function() {
$("#butSort").click(function() {
enableSort();
});
$("#butScroll").click(function() {
enableScroll();
});
});