触摸屏上拖动图片

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

<!DOCTYPE html>
<html>
<head>
<title>触摸屏拖动图片</title>
<@R_403_338@ 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>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

触摸屏上拖动图片

猜你在找的HTML相关文章