拖动DIV
链接：https://www.cnblogs.com/joyco773/p/6519668.html
移动端：div在手机页面上随意拖动
1 <!doctype html>
2 <html>
3 <head>
4 <title>弹窗</title>
5 <meta charset="utf-8">
6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
7 <style>
8 body{margin:0;padding:0;}
9 .barrage{position:fixed;display:block;top:0;}
10 .barrage_name{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#f00), to(#0f0));border-radius:50%;}
11 .barrage_name_hover{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#ff0), to(#00f));border-radius:50%;}
12 .col1{color:#fff;display: block;padding: 17px;text-align: center;}
13 </style>
14 </head>
15 <body>
16 <div class="barrage" id="barrage">
17 <div class="barrage_name" id="barrage_name">
18 <span class="col1">打开弹幕</span>
19 </div>
20 </div>
21 <div>
22 <p>我是来打酱油的</p>
23 <p>我是来打酱油的</p>
24 <p>我是来打酱油的</p>
25 <p>我是来打酱油的</p>
26 <p>我是来打酱油的</p>
27 <p>我是来打酱油的</p>
28 <p>我是来打酱油的</p>
29 <p>我是来打酱油的</p>
30 </div>
31 </body>
32 <script type="text/javascript">
33 $(function(){
34 var cont=$("#barrage");
35 var contW=$("#barrage").width();
36 var contH=$("#barrage").height();
37 var startX,startY,sX,sY,moveX,moveY;
38 var winW=$(window).width();
39 var winH=$(window).height();
40 var barrage_name=$("#barrage_name");
41 var barrage_frame=$("#barrage_frame");
42 var body=$("body");
43
44
45 cont.on({//绑定事件
46 touchstart:function(e){
47 startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标
48 startY = e.originalEvent.targetTouches[0].pageY; //获取点击点的Y坐标
49 //console.log("startX="+startX+"************startY="+startY);
50 sX=$(this).offset().left;//相对于当前窗口X轴的偏移量
51 sY=$(this).offset().top;//相对于当前窗口Y轴的偏移量
52 //console.log("sX="+sX+"***************sY="+sY);
53 leftX=startX-sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置
54 rightX=winW-contW+leftX;//鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
55 topY=startY-sY;//鼠标所能移动最上端是当前鼠标距div上边距的位置
56 bottomY=winH-contH+topY;//鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置
57 },
58 touchmove:function(e){
59 e.preventDefault();
60 moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
61 moveY=e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标
62 //console.log("moveX="+moveX+"************moveY="+moveY);
63 if(moveX<leftX){moveX=leftX;}
64 if(moveX>rightX){moveX=rightX;}
65 if(moveY<topY){moveY=topY;}
66 if(moveY>bottomY){moveY=bottomY;}
67 $(this).css({
68 "left":moveX+sX-startX,
69 "top":moveY+sY-startY,
70 })
71 },
72
73 })
74
75 })
76 </script>
77 </html>
为了兼容PC和移动端，想出了以下办法：
拖动时候用到的三个事件： mousedown 、 mousemove 、 mouseup 在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是： touchstart 、 touchmove 、 touchend 事件。还有一点要注意的是在PC端获取当前鼠标的坐标是： event.clientX 和 event.clientY ，在移动端获取坐标位置则是： event.touches[0].clientX 和 event.touches[0].clientY 。下面就来说说怎么实现这个效果吧，先看一下效果：
PC端 ：
移动端 ：
先来分析一个拖动的流程，以PC端为例，首先是鼠标按下（ mousedown 事件），然后移动（ mousemove 事件），最后释放鼠标（ mouseup 事件），首先要设置一个变量记录鼠标是否按下，在鼠标按下的时候，我们做一个标记，然后需要记录一下鼠标当前的坐标，还有这个div当前的偏移量，当鼠标开始移动的时候，记录下鼠标当前的坐标，用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时div的偏移量就是现在div距离父辈元素的距离，当鼠标释放的时候将标记改为鼠标已经释放。下面来看一下代码：
1 var flag = false; //是否按下鼠标的标记
2 var cur = { //记录鼠标按下时的坐标
3 x:0,
4 y:0
5 }
6 var nx,ny,dx,dy,x,y ;
7 //鼠标按下时的函数
8 function down(){
9 flag = true; //确认鼠标按下
10 cur.x = event.clientX; //记录当前鼠标的x坐标
11 cur.y = event.clientY; //记录当前鼠标的y坐标
12 dx = div2.offsetLeft; //记录div当时的左偏移量
13 dy = div2.offsetTop; //记录div的上偏移量
14 }
15 //鼠标移动时的函数
16 function move(){
17 if(flag){ //如果是鼠标按下则继续执行
18 nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据
19 ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据
20 x = dx+nx; //div在x轴的偏移量加上鼠标在x轴移动的距离
21 y = dy+ny; //div在y轴的偏移量加上鼠标在y轴移动的距离
22 div2.style.left = x+"px";
23 div2.style.top = y +"px";
24 }
25 }
26 //鼠标释放时候的函数
27 function end(){
28 flag = false; //鼠标释放
29 }
然后在将事件加入到这个div中即可，下面再来看一个在移动端需要做些什么，首先是事件不同，只需要在添加移动端的 touchatart 、 touchmove 、 touchend 就可以了，还有一个不同的时移动端获取坐标是 event.touches[0].clientX 和 event.touches[0].clientY ，这也很简单，只要加上判断就可以了，如果是PC端就使用event，如果是移动端就使用 event.touches ：
1 var touch ;
2 if(event.touches){
3 touch = event.touches[0];
4 }else {
5 touch = event;
6 }
还有一点要注意，在移动端拖动div的时候移动端的页面会自动产生滑动效果，所以还需要在 touchmove 的是给页面添加一个阻止默认事件的函数。
下面是整个代码，可以在Chrome下模拟移动端测试，点击这里查看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>适配移动端的拖动效果</title>
<style>
#div1{
height: 1000px;
}
#div2{
position: absolute;
top:0;
left:0;
width: 100px;
height: 100px;
background: #bbbbbb;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<script>
var flag = false;
var cur = {
x:0,
y:0
}
var nx,ny,dx,dy,x,y ;
function down(){
flag = true;
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
cur.x = touch.clientX;
cur.y = touch.clientY;
dx = div2.offsetLeft;
dy = div2.offsetTop;
}
function move(){
if(flag){
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
nx = touch.clientX - cur.x;
ny = touch.clientY - cur.y;
x = dx+nx;
y = dy+ny;
div2.style.left = x+"px";
div2.style.top = y +"px";
//阻止页面的滑动默认事件
document.addEventListener("touchmove",function(){
event.preventDefault();
},false);
}
}
//鼠标释放时候的函数
function end(){
flag = false;
}
var div2 = document.getElementById("div2");
div2.addEventListener("mousedown",function(){
down();
},false);
div2.addEventListener("touchstart",function(){
down();
},false)
div2.addEventListener("mousemove",function(){
move();
},false);
div2.addEventListener("touchmove",function(){
move();
},false)
document.body.addEventListener("mouseup",function(){
end();
},false);
div2.addEventListener("touchend",function(){
end();
},false);
</script>
</body>
</html>
拖动DIV的更多相关文章
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- javascript拖动div
div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...
- easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- [可拖动DIV]刚开通博客顺便就写了点东西！
说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- 基于jquery的可拖动div
昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...
- 一款基于jquery ui漂亮的可拖动div实例
今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览 ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
随机推荐
- web框架开发-Django的Forms组件
校验字段功能 针对一个实例:用户注册. 模型:models.py class UserInfo(models.Model): name=models.CharField(max_length=32) ...
- app原生和H5混合使用自动化
1.从原生切换到H5需要 driver.switch_to.context('WEBVIEW_com.tencent.mm:tools') 2.参考连接: https://testerhome.com ...
- SQL其他常用的语句
阅读目录 一:汇总数据 1.理解AVG函数 2.理解COUNT()函数 3.理解max()函数 4.理解min()函数 5.理解sum()函数 二:分组数据 1 创建分组(group by) 2 HA ...
- git完全cli指南之详细思维导图整理分享
一直以来都觉得 在开发过程中 能用命令行的还是用命令行 能用快捷键的就要快捷键 前期可能要点学习成本 但是熟练后带来的好处还是非常可观的 所以一直坚持使用命令行的方式来使用git 基本上每个操作都能心 ...
- JAVA工程师-蚂蚁金服电话面试
今天5点半接到一个杭州的电话,是蚂蚁金服打来的,当时心里一阵发慌,由于还在上班,就和面试官约定6点下班之后再来.挂完电话,心里忐忑的不行,感觉自己这也没准备好,那也没准备好.剩下半个小时完全没有心思再 ...
- HTML5新增特性
1. 语义化标签 2. 增强型表单 (1)新的表单输入类型 (2)新表单元素 (3)新表单属性 3. 视频和音频 4. Canvas绘图(图形.路径.文本.渐变.图像) 5. SVG绘图 (与Canv ...
- 系统IO
系统IO:Linux系统提供给应用程序操作文件的接口 Everything is a file ,in Unix 在Unix/Linux下,万物皆文件 打开文件函数原型: #include< ...
- element ui 时间 date 差一天
let BirthdayYMD = common.formatDate(this.addForm.Dendline); this.addForm.Dendline = new Date(Birthda ...
- 控制结构(10): 指令序列（opcode）
// 上一篇:管道(pipeline) // 下一篇:Continuation-passing_style(CPS) 发现问题 在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编 ...
- Flask 快速使用 —— （1）
Flask.Django.Tornado框架 区别 1 Django:重武器,内部包含了非常多组件:ORM.Form.ModelForm.缓存.Session.中间件.信号等... 2 Flas ...