Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

移动端拖动 #32

Open
lcgyh opened this issue Dec 13, 2017 · 2 comments
Open

移动端拖动 #32

lcgyh opened this issue Dec 13, 2017 · 2 comments

Comments

@lcgyh
Copy link
Owner

lcgyh commented Dec 13, 2017

No description provided.

@lcgyh lcgyh added the 主题 label Dec 13, 2017
@lcgyh lcgyh removed the 主题 label Aug 29, 2018
@lcgyh
Copy link
Owner Author

lcgyh commented Aug 1, 2019 •
edited
Loading

记录在前端网的笔记

账号：[email protected]

@lcgyh
Copy link
Owner Author

lcgyh commented Aug 1, 2019 

<!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 lcgyh changed the title jsp 移动端拖动 Aug 1, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@lcgyh