javascript实现移动端触屏拖拽功能
更新时间：2020年07月29日 09:31:03 作者：XSP_csdn
这篇文章主要为大家详细介绍了javascript实现移动端触屏拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现移动端触屏拖拽的具体代码，供大家参考，具体内容如下
HTML:
<body> <div id="div1"> </div> </body>
CSS:
<style media="screen">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height:100%;
}
#div1 {
width: 50px;
height: 50px;
background: cyan;
position: absolute;
}
</style>
JS:
<script type="text/javascript">
var div1=document.querySelector('#div1');
var maxW=document.body.clientWidth-div1.offsetWidth;
var maxH=document.body.clientHeight-div1.offsetHeight;
div1.addEventListener('touchstart',function(e){
var ev = e || window.event;
var touch = ev.targetTouches[0];
oL = touch.clientX - div1.offsetLeft;
oT = touch.clientY - div1.offsetTop;
document.addEventListener("touchmove",defaultEvent,false);
})
div1.addEventListener('touchmove',function(e){
var ev = e || window.event;
var touch = ev.targetTouches[0];
var oLeft = touch.clientX - oL;
var oTop = touch.clientY - oT;
if(oLeft<0){
oLeft=0;
}else if (oLeft>=maxW) {
oLeft=maxW;
}
if(oTop<0){
oTop=0;
}else if (oTop>=maxH) {
oTop=maxH;
}
div1.style.left = oLeft + 'px';
div1.style.top = oTop + 'px';
})
div1.addEventListener('touchend',function(){
document.removeEventListener("touchmove",defaultEvent);
})
function defaultEvent(e) {
e.preventDefault();
}
</script>
说明 :
maxW:div1可移动的最大宽度
maxH:div1可移动的最大高度
oL、oT:鼠标所点位置的坐标
效果:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要是对javascript:json数据的页面绑定示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
获取对象所有key的方法，需要使用 Object.keys(obj) 方法,Object.keys(obj)方返回一个数组，这个数组包含obj对象中的所有key，这篇文章主要介绍了javascript如何获取对象的key和value,需要的朋友可以参考下2022-12-12
微信jssdk踩坑之签名错误invalid signature
这篇文章主要介绍了微信jssdk踩坑之签名错误invalid signature，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
popdiv...2006-07-07
这篇文章主要为大家详细介绍了JavaScript实现抽奖器效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了基于javascript实现放大镜特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了JavaScript实现请求服务端接口方法，JavaScript 中请求服务端接口的代码实现可能会因为使用的方法而有所不同，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
这篇文章主要介绍了JavaScript贪吃蛇的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
javascript遍历json对象的key和任意js对象属性实例
下面小编就为大家带来一篇javascript遍历json对象的key和任意js对象属性实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了JS中SetTimeout和SetInterval使用初探,需要的朋友可以参考下2017-03-03
最新评论