【前端知识点】HTML5中用户体验——元素拖放

最新推荐文章于 2022-06-12 17:20:24 发布

无知偏执狂

最新推荐文章于 2022-06-12 17:20:24 发布

阅读量430

点赞数

分类专栏：互联网思想文章标签： html5 用户体验移动web开发拖拽效果 javascript

本文链接：https://blog.csdn.net/chaunceyw/article/details/45289129

版权

互联网思想专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话说我刚刚从PC的Web开发转到移动的Web开发……

当前移动Web开发不得不面对强大的流行的Android,IOS这两大触摸屏系统啊，毕竟这是热门啊，用户都在这里。

这次因为开发需要，我得试着做一个背景可以拖动的div页面。当一切都在PC上做完之后，转到手机进行测试，竟然无效啊，拖动无效。经过调试发现mousemove事件（还有mousedown,mouseup）的clientX的属性在PC端几款浏览器都没问题，在平板的Android浏览器和QQ浏览器下都是未定义undefined。

当时想是不是因为event.clientX在移动端不支持，然后就试了一下offsetX和screenX，结果都一样，这个时候都快崩溃了我。

按说mousedown,mouseup,mousemove和touchstart，touchend，touchmove之间是可以互通的，也就是说一般面向pc开发的mouse时间对touch事件有效，据说是效率有差异。但是pc上测试没有任何问题，在手机上就是无效。
然后百度了很久很久……

终于在一个讨论touch相关事件的例子中看到别人已经经过测试的e.touches[0].pageX，光这个属性还是不够的，发现使用jquery为div绑定touch事件后这个属性也是未定义，必须使用原生的addEventListener。

最后，贴上demo的代码，希望给遇到同样问题的你提供帮助。

 
 <html>   
<head>   
    <meta charset="UTF-8"> 
    <style type="text/Css"> 
        body{background-color:#000000;}  
        .window{position:absolute;z-index:1;overflow:hidden;width:600px;height:400px;background-color:red;left: 0px;}  
        .dragme{position:relative;background-image:url('img/testbg.png');width:800px;height:400px;}   
    </style>   
 
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script> 
<script type="text/javascript">   
var isdrag=false;   
var tx,x;    
$(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 = tx + e.touches[0].pageX - x;  
   $("#moveid").css("left",n);  
   return false;   
   }   
}   
 
function selectmouse(e){   
   isdrag = true;   
   tx = parseInt(document.getElementById("moveid").style.left+0);   
   x = e.touches[0].pageX;    
   return false;   
}   
</script>   
 
</head>   
<body>   
<div align="left" class="window"> 
     <div id="moveid"  class="dragme"> 
        这是一个可以通过触摸屏拖动的demo<br> 
            这个demo花费了我半天时间，原因是以前从来没有做过面向触摸屏的Web，按说mousedown,mouseup,mousemove和touchstart，touchend，touchmove  
            之间是可以互通的，也就是说一般面向pc开发的mouse时间对touch事件有效，据说是效率有差异。但是pc上测试没有任何问题，在手机上就是无效。  
            然后……  
            然后百度了很久很久……  
          
     </div> 
 </div> 
</html>

本文出自 “缘分java” 博客，请务必保留此出处http://zhangwy.blog.51cto.com/1590608/879152

无知偏执狂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端知识点】HTML5中用户体验——元素拖放

话说我刚刚从PC的Web开发转到移动的Web开发……当前移动Web开发不得不面对强大的流行的Android,IOS这两大触摸屏系统啊，毕竟这是热门啊，用户都在这里。这次因为开发需要，我得试着做一个背景可以拖动的div页面。当一切都在PC上做完之后，转到手机进行测试，竟然无效啊，拖动无效。经过调试发现mousemove事件（还有mousedown,mouseup）的clientX的属
复制链接

扫一扫