一个用在手机上的简单js拖拽效果

来源:互联网 发布:网络歌曲男歌手 编辑:程序博客网 时间:2024/06/13 21:10

http://blog.163.com/xiaoyou_000/blog/static/65067392201521664214534/

http://www.17sucai.com/pins/8765.html 手机拖拽效果

<!doctype html>
<html>
<head>
 <meta charset='utf-8' />
 <meta name="viewport"
  content="
        width = device-width ,
  height = device-height ,
        initial-scale = 1,
        minimum-scale = 1,
        maximum-scale = 1,
        user-scalable =no,
  
  "
 />
 <title></title>
</head>

<body>
 
 <div id="div" style="width:100px;height:100px;background-color:red;position:absolute;"></div>
 <script>
  var div = document.getElementById('div');
  div.addEventListener('touchmove', function(event) {
  event.preventDefault();//阻止其他事件
  // 如果这个元素的位置内只有一个手指的话
  if (event.targetTouches.length == 1) {
   var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
   div.style.left = touch.pageX + 'px';
  div.style.top = touch.pageY + 'px';
  div.style.background = "green";
   }
  }, false);

 </script>
</body>
</html>


2.http://blog.csdn.net/pvfhv/article/details/6174337

0 0
原创粉丝点击