介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比;
& lt; title> Document
& lt; style>
身体{
background - color: # 1 cee89;
}
div {
位置:绝对的;
左:0;
宽度:100 px;
身高:100 px;
background - color: # 8294 ff;
border - radius: 20 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div> & lt;/div>
& lt; script>
var div=document.querySelector (& # 39; div # 39;);
var startX=0;//获取手指初始坐标
var startY=0;
var x=0;//获得盒子原来的位置
var y=0;//手指触摸
div.addEventListener (& # 39; touchstart& # 39;,函数(e) {//获取手指初始坐标
startX=e.targetTouches [0] .pageX;
startY=e.targetTouches [0] .pageY;
x=this.offsetLeft;
y=this.offsetTop;
this.style。boxShadow=& # 39; 15 0 0 px rgba (0, 0, 0, 0。6) & # 39;;
});//手指离开
div.addEventListener (& # 39; touchend& # 39;,函数(e) {
this.style。boxShadow=& # 39; & # 39;;
});//手指按住移动
div.addEventListener (& # 39; touchmove& # 39;,函数(e) {//计算手指的移动距离:手指移动之后的坐标减去手指初始的坐标
var moveX=e.targetTouches [0]。pageX - startX;
var moveY=e.targetTouches [0]。pageY - startY;//移动盒子盒子原来的位置+手指移动的距离
this.style。左=x + moveX + & # 39; px # 39;;
this.style。顶级=y + moveY + & # 39; px # 39;;
e.preventDefault ();//阻止屏幕滚动的默认行为
});
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章将为大家详细讲解有关利用JavaScript如何在移动端实现一个拖动元素,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
代码实现:
关于利用JavaScript如何在移动端实现一个拖动元素就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
