这个能用原生写最好用原生的 xxx.addEventListener("touchstart",this,false)
touchmove
touchend
这3个过程来写，jqmobi是我见过最好的一个正对的web手机端的js框架。他可以使用zepto.js的一些插件 但是需要修改一些小地方就可以了。
<style type="text/Css">body{background-color:#000000}
.window{position:absolutez-index:1overflow:hiddenwidth:300pxheight:100pxbackground-color:redleft: 0px}
.dragme{position:relativewidth:300pxheight:800px}
</style>
//引入jqmobi
<script type="text/javascript">
var isdrag=false
var ty,y
$(function(){
document.getElementById("moveid").addEventListener('touchend',function(){
sdrag = false
})
document.getElementById("moveid").addEventListener('touchstart',selectmouse)
document.getElementById("moveid").addEventListener('touchmove',movemouse)
})
function movemouse(e){
if (isdrag){
var n = ty+ e.touches[0].pageY - y
$("#moveid").css("top",n)
return false
}
}
function selectmouse(e){
isdrag = true
ty = parseInt(document.getElementById("moveid").style.top+0)
y = e.touches[0].pageY
return false
}
</script>
</head>
<body>
<div align="left" class="window">
<div id="moveid" class="dragme">
<h1>这是一个可以通过触摸屏拖动的demo</h1>
<p>
向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动
</p>
</div>
</div>
这是个很简单的例子 细节需要自己优化下
当你学会了css3 html5 以及移动端的JS框架。你就不屑去用qjm了。jqm优点是兼容性强。弱点就是速度太慢冗余代码太多一个项目哪需要那么多功能。现在很多框架实现选择性的组合生成一个真正适用于自己的版本 如 zepto.js 和jqmobi（这个不是jquerymobile哈，目前是速度最快的一 个 框架）。
我用各种js框架都试着做过app。结果jqm是最慢的一个，其他的也达不到理想的速度。后面决定自己写js和css。结果就是ios app打开速度由JQM的6秒左右提升为0.8秒的秒开。
原理：jqm先遍历dom元素，对每个绑定data-xxxx的属性进行事件绑定,里面有句代码是这样写的
b.getAttribute&&(d=b.getAttribute("data-"+a.mobile.ns+c)------------------------------------------
tapToggleBlacklist:"a, button, input, select, textarea, .ui-header-fixed, .ui-footer-fixed, .ui-flipswitch, .ui-popup, .ui-panel, .ui-panel-dismiss-open",hideDuringFocus:"input, textarea, select"
对于不同的role对应不同的规则 而这些role存在于上述的一个list里。
