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实现移动端上的触屏拖拽功能
本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi
-
JS实现移动端触屏拖拽功能
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'); //限
-
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: 5
-
vue实现移动端触屏拖拽功能
vue实现移动端可拖拽浮球,供大家参考,具体内容如下 1 首先创建一个div <div class="floatball" id="floatball" @mousedown="down" @touchstart.stop="down" @mousemove="move" @touchmove.stop="move" @mouseup="end" @touche
-
vue移动端写的拖拽功能示例代码
相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在
-
移动端触屏幻灯片图片切换插件idangerous swiper.js
强大的移动端触屏幻灯片图片和HTML内容切换插件idangerous swiper,支持自定义左右切换还是上下切换,支持多个分组切换,支持下拉更新切换,支持TAB方式切换等十几种切换效果,支持众多的选项配置,如: speed:切换的速度(毫秒) autoplay:自动播放的速度 mode:切换模式 horizontal(横向) vertical(竖向) loop:是否循环播放true false 如此强大的配置功能,值得使用. 使用方法: 1.加载插件 <link rel="stylesh
-
基于JavaScript实现右键菜单和拖拽功能
下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {
-
javascript支持firefox,ie7页面布局拖拽效果代码
javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是
-
JavaScript实现图片的放大缩小及拖拽功能示例
本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能.分享给大家供大家参考,具体如下: 实现效果如下: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{width:400px;height:400px;overflow:
-
JavaScript使用面向对象实现的拖拽功能详解
本文实例讲述了JavaScript使用面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: 面向对象有个前提: 前提:所有东西都必须包含在onload里 改写:不能有函数嵌套,可以有全局变量 过程,如下 onload改成构造函数, 全局变量改成属性(通过this) 函数改写成方法 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/