本文实例为大家分享了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:鼠标所点位置的坐标
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“javascript实现移动端触屏拖拽功能”评论...
更新日志
2024年05月06日
2024年05月06日
- 名洋.1990-分手摆在胸口【天下唱片】【WAV+CUE】
- 罗大佑.2018-当年离家的年轻人巡回演唱会【大右音乐】【WAV+CUE】
- 姜育恒.1991-金曲精丫永声】【WAV+CUE】
- 水木年华.2010-启程【英皇星艺】【WAV+CUE】
- 邓丽君《漫步人生路》[DSF][1.3G]
- 林俊杰《学不会》[DSF][1.3G]
- 费玉清《Ultimate Sound》SACD 限量版[DSF][2G]
- 杨耀东.2002-经典金曲珍藏版2CD【东尼机构】【WAV+CUE】
- 新民樂演奏《春来人不来上海管弦楽團伴奏》[WAV+CUE].
- 玛吉阿米藏族民间歌舞艺术团-《仓央嘉措之歌》[ADMS][WAV+CUE]
- 王心凌《爱你》[FLAC][836M]
- 叶少菲《纯爱沉思录》[320K/MP3][120.43MB]
- 叶少菲《纯爱沉思录》[FLAC/分轨][330.3MB]
- 电子琴《汽车音响精品第三集第四集第五集》特效360度[WAV+CUE]
- 新民樂演奏《春来人不来上海管弦楽團伴奏》[WAV+CUE