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

1.html

div id='div1'/div

2.css

* { margin : 0；padd : 0；}html，正文{宽度： 100%；高度： 100%;} # div1 { width: 50px高度： 50px背景：青色；绝对位置：}3.js

var div 1=文档。query selector(' # div 1 ')；//限制最大宽高，不让滑块出去var MaxW=文档。尸体。客户端宽度-div 1。用.抵消；var MaxH=文档。尸体。客户高度-1区。偏移心；//手指触摸开始，记录差异的初始位置1区。addeventlistener('触摸开始'，函数(e){ var ev=e | | window。事件；var touch=ev。target Touch[0]；oL=触摸。clientx-div 1。offsetleftoT=触摸。客户1区。偏移顶部；文件。addeventlistener(' touch move '，defaultEvent，false)；});//触摸中的，位置记录1区。addeventlistener('触摸移动'，函数(e){ var ev=e | | window。事件；var touch=ev。target Touch[0]；var oLeft=touch。客户端x-oL；var OtP=触摸。client y-oT；if(oLeft 0){ oLeft=0；} else if(oLeft=MaxW){ oLeft=MaxW；} if(OtoP 0){ OtoP=0；} else if(OtoP=MaxH){ OtoP=MaxH；} div 1。风格。left=oLeft ' px1区。风格。top=OtoP ' px});//触摸结束时的处理1区。addeventlistener(' touch end '，function(){ document。removeeventlistener(' touch move '，Defaultevent)；});//阻止默认事件函数default event(e){ e . PreventDefault()；}3.效果

4.几点说明

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

总结

以上所述是小编给大家介绍的射流研究…实现移动端触屏拖拽功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！