移动端拖动 - Githubissues

<!DOCTYPE html>
<html>
<head>
    <title>时钟</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="http://ohiy5a45u.bkt.clouddn.com/subject.css">
    <link href="styles/shizhong.css" rel="stylesheet" />
    <script src='http://www.zeptojs.cn/zepto.min.js'></script>
    <script src='http://ohiy5a45u.bkt.clouddn.com/touch.js'></script>
    <script src='scripts/shizhong.js'></script>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
       .drag{width: 1rem;height: 1rem;background: pink;position: absolute;}
    </style>
    <script>
       var drags = $('#drags .drag');
for (var i = 0; i < drags.length; i++) {
  var drag_dx, drag_dy; (function(i) {
    drags[i].addEventListener('touchstart',
    function(event) {
      var touch = event.touches[0];
      var dragstar_x = touch.pageX;
      var dragstar_y = touch.pageY;
      var dragbox_x = drags[i].offsetLeft; //注意这里相对位置，根据情况作调整
      var dragbox_y = drags[i].offsetTop; //注意这里相对位置，根据情况作调整
      drag_dx = dragstar_x - dragbox_x;
      drag_dy = dragstar_y - dragbox_y;
    },
    false);

    drags[i].addEventListener('touchmove',
    function(event) {
      event.preventDefault();
      var touch = event.targetTouches[0];
      var dragmove_x = touch.pageX;
      var dragmove_y = touch.pageY;
      drags[i].style.left = dragmove_x - drag_dx + 'px';
      drags[i].style.top = dragmove_y - drag_dy + 'px';
      console.log(drags[i].style.left)
    },
    false);
    drags[i].addEventListener('touchend',
    function(event) {
      var touch = event.changedTouches[0];
      var dragend_x = touch.pageX;
      var dragend_y = touch.pageY;
      alert("x:" + dragend_x + "y:" + dragend_y); //输出手指离开点位置坐标
    },
    false);
  })(i)
}
    </script>
</head>
<body>  
<ul class="clearfix" id="drags">
            <li class="drag fl"></li>  
            <li class="drag fl"></li>  
            <li class="drag fl"></li>  
            <li class="drag fl"></li>  
        </ul>
</body>
</html>
lcgyh / myDocs

移动端拖动 #32
