免费小程序模板_JavaScript完成移动端拖动元素

阅读  ·  发布日期 2021-01-04 17:57  ·  admin
JavaScript实现移动端拖动元素       这篇文章主要为大家详细介绍了JavaScript实现移动端拖动元素,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。