触摸屏上拖动图片

2015/11/19 45407
<!DOCTYPE html>
<html>
<head>
<title>触摸屏拖动图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
function info(text) {
   document.getElementById("info").innerText = "调试信息:"+text;
}

function dragStart(e) {
   var e = e || window.event;
   var mypic = document.getElementById("mypic");
   mypic['ori_x'] = e.targetTouches[0].clientX;
   mypic['ori_y'] = e.targetTouches[0].clientY;
   mypic['ori_left'] = parseInt(mypic.style.left);
   mypic['ori_top'] = parseInt(mypic.style.top);
   info("touch start");
}

function dragMove(e){
   e.preventDefault();                       //避免默认的事件处理
   var e = e || window.event;                //获取真实的事件变量
   var myElement = e.srcElement || e.target; //获取事件的源DOM

   var mypic = document.getElementById("mypic");
   mypic['draging'] = true;

   myElement.ontouchend= function(){
      mypic['draging'] = false;
   info("touch end");
   }

   document.ontouchmove= function(eMove){
      var eMove = eMove || window.event;
      info("touch move");
      if(mypic['draging'] == true){
         myElement.style.left = eMove.targetTouches[0].clientX - mypic['ori_x'] + mypic['ori_left'] + "px";
         myElement.style.top = eMove.targetTouches[0].clientY - mypic['ori_y'] + mypic['ori_top'] + "px";
         return false;
      }
   }
}
//当网页加载好以后就为图片拖动定义事件
window.onload = function(){
   var mypic = document.getElementById("mypic");
   mypic['draging'] = false;
   mypic.addEventListener('touchstart', dragStart, false);
   mypic.addEventListener('touchmove', dragMove, false);
}
</script>
</head>
<body>
<h1 id="info"></h1>
<img id="mypic" style="left:80px;top:80px;position:absolute" src="251fa713397f73327093f5c7e131bfd4.jpg" />
</body>
</html>
代码片段
