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

最新推荐文章于 2024-06-18 09:47:12 发布

ForMyWebFrontSide

最新推荐文章于 2024-06-18 09:47:12 发布

阅读量3.1k

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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