http://www.gbtags.com/gb/gbtutorials/448.htm
上面网址是用html5 的拖拽api实现的，但经测试，手机上不起作用。
下面是我专门针对移动设备写的触摸拖动效果：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>可拖动的div</title> <style type="text/css"> *{margin:0;padding:0;} #aimObj{ position:absolute; background-color: #39f; height:60px; width:60px; border-radius: 30px; } #cont{ position: absolute; top:100px; left:30px; width:400px; height:600px; background-color:#999; } </style> </head> <body> <div id="cont"> <div id="aimObj" draggable="true"></div> </div> </body> <script type="text/javascript"> var obj=document.querySelector("#aimObj"); var ix,iy; obj.addEventListener('touchstart',function(event){ if (event.targetTouches.length == 1) { event.preventDefault(); var touch = event.targetTouches[0]; //getComputedStyle函数可参考网址：http://blog.sina.com.cn/s/blog_89cd68470101i108.html var ox=parseInt(getComputedStyle(this,false)["left"]); ox=ox?ox:0; var oy=parseInt(getComputedStyle(this,false)["top"]); oy=oy?oy:0; ix=touch.pageX-parseInt(ox); iy=touch.pageY-parseInt(oy); } },false); obj.addEventListener('touchmove',function(event){ // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { event.preventDefault();// 阻止浏览器默认事件，重要 var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 var ax=parseInt(touch.pageX-ix); var ay=parseInt(touch.pageY-iy); this.style.left = ax+"px"; this.style.top = ay+"px"; } },false); </script> </html>