欢迎光临
我的个人博客网站

JavaScript移动端拖动元素


代码实现:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         body {             background-color: #1cee89;         }                  div {             position: absolute;             left: 0;             width: 100px;             height: 100px;             background-color: #8294ff;             border-radius: 20px;         }     </style> </head>  <body>     <div></div>     <script>         var div = document.querySelector('div');         var startX = 0; // 获取手指初始坐标         var startY = 0;         var x = 0; // 获得盒子原来的位置         var y = 0;         // 手指触摸         div.addEventListener('touchstart', function(e) {             //  获取手指初始坐标             startX = e.targetTouches[0].pageX;             startY = e.targetTouches[0].pageY;             x = this.offsetLeft;             y = this.offsetTop;             this.style.boxShadow = '0 0 15px rgba(0, 0, 0, .6)';         });         // 手指离开         div.addEventListener('touchend', function(e) {             this.style.boxShadow = '';         });          // 手指按住移动         div.addEventListener('touchmove', function(e) {             //  计算手指的移动距离:手指移动之后的坐标减去手指初始的坐标             var moveX = e.targetTouches[0].pageX - startX;             var moveY = e.targetTouches[0].pageY - startY;             // 移动盒子 盒子原来的位置 + 手指移动的距离             this.style.left = x + moveX + 'px';             this.style.top = y + moveY + 'px';             e.preventDefault(); // 阻止屏幕滚动的默认行为         });     </script> </body>  </html> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript移动端拖动元素
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏