当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现移动端触屏拖拽功能

JS实现移动端触屏拖拽功能

2018年08月08日  | 移动技术网IT编程  | 我要评论

1.html

<div id="div1"></div>

2.css

* {
 margin: 0;
 padding: 0;
}
html,
body {
 width: 100%;
 height: 100%;
}
#div1 {
 width: 50px;
 height: 50px;
 background: cyan;
 position: absolute;
}

3.js

var div1 = document.queryselector('#div1');
//限制最大宽高，不让滑块出去
var maxw = document.body.clientwidth - div1.offsetwidth;
var maxh = document.body.clientheight - div1.offsetheight;
//手指触摸开始，记录div的初始位置
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();
}

3.效果

4.几点说明

      对于触屏手机端用手指事件，对于pc端用鼠标事件，其实原理都一样。

总结

以上所述是小编给大家介绍的js实现移动端触屏拖拽功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网