JS—实现拖拽
Posted 夏至未至
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS—实现拖拽相关的知识，希望对你有一定的参考价值。
JS中的拖拽示例:
1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变
2)实现拖拽遇到的问题:
问题1:当鼠标按下移动过快时,离开了拖拽的物体时,这时拖拽物体将不再随着鼠标移动
因为拖拽的div太小了,这时我们可以将在拖拽物体上的mousemove事件放到document上面
同时将mouseup也改为document上面的事件
IE下直接用obj.setCapture()即可解决,但要做三个浏览器的兼容问题
问题2:在FF中第二次拖拽,空div的Bug
解决方法:在mousedown函数上面添加阻止默认行为即可:return false;
问题3:会出现将div脱出浏览器窗口的情况,用户体验不好
解决方法:限制div的拖动范围
问题4:对于图片拖拽--阻止默认事件return false
问题5:当拖拽图片或者div时,经过其他文字时,会出现文字选中
解决方法：
1.阻止默认事件return false
--return false为新版浏览器FF,Chrome,IE9-11阻止了这个问题,但是IE8以下却不行
2.IE下解决拖拽时文字选中问题--用事件捕获(只写IE下认识的事件),要解决兼容问题
3)事件捕获:只有IE识别
obj.setCapture()--作用是将整个网页中所有的事件集中在某个对象上,即网页中的其他对象不能获得事件
obj.releaseCapture()--解除事件捕获
示例1:拖拽1,不拖出对象的父级dragDiv
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style media="screen">
9 #dragDiv{
10 width:400px;
11 height: 400px;
12 background: #ccc;
13 position: relative;
14 margin: 20px;
15 }
16 #drag{
17 width: 100px;
18 height: 100px;
19 background: red;
20 position: absolute;
21 }
22 </style>
23 </head>
24 <body>
25 <div id="dragDiv">
26 11111111111111111111
27 <div id="drag">拖拽2-有范围拖拽</div>
28 </div>
29
30
31 <script type="text/javascript">
32 window.onload=function(){
33 //拖拽,不拖出对象的父级dragDiv
34 var oDragDiv=document.getElementById(‘dragDiv‘);
35 var oDrag=document.getElementById(‘drag‘);
36 oDrag.onmousedown=function(ev){
37 var oEvent=ev||event;
38 var pos=getMousePosition(oEvent);
39 var disX=pos.x-oDrag.offsetLeft;
40 var disY=pos.y-oDrag.offsetTop;
41 if(oDrag.setCapture){
42 //兼容IE7-11
43 oDrag.onmousemove=Mousemove;
44 oDrag.onmouseup=mouseUp;
45 oDrag.setCapture();
46 }else{
47 //兼容FF,Chrome
48 document.onmousemove=Mousemove;
49 document.onmouseup=mouseUp;
50 }
51
52 function getMousePosition(ev){
53 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
54 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
55 return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
56 };
57 //合并代码
58 function Mousemove(ev){
59 var oEvent=ev||event
60 var pis=getMousePosition(oEvent);
61 var l=pis.x-disX;
62 var t=pis.y-disY;
63
64 //限制范围,磁性吸附,快接近父级时,自动吸附上去
65 if (l<30) {
66 l=0;
67 }else if(l>oDragDiv.offsetWidth-oDrag.offsetWidth){
68 l=oDragDiv.offsetWidth-oDrag.offsetWidth;
69 }
70 if (t<30) {
71 t=0;
72 }else if(t>oDragDiv.offsetHeight-oDrag.offsetHeight){
73 t=oDragDiv.offsetHeight-oDrag.offsetHeight;
74 }
75 oDrag.style.left=l+‘px‘;
76 oDrag.style.top=t+‘px‘;
77 };
78 function mouseUp(){
79 //当鼠标抬起时,mousemove/up清空
80 this.onmousemove=null;
81 this.onmouseup=null;
82 if (oDrag.releaseCapture) {
83 oDrag.releaseCapture();
84 }
85 };
86 return false; //FF等高版本浏览器中阻止默认行为
87 };
88 }
89 </script>
90 </body>
91 </html>
示例2:带框的拖拽:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style media="screen">
9 #dragDiv1{
10 width:400px;
11 height: 400px;
12 background: #ccc;
13 position: relative;
14 margin: 20px;
15 }
16 #drag1{
17 width: 100px;
18 height: 100px;
19 background: red;
20 position: absolute;
21 }
22 .box{
23 border: 1px dashed black;
24 position: absolute;
25 }
26 </style>
27 </head>
28 <body>
29 <div id="dragDiv1">
30 11111111111111111111
31 <div id="drag1">拖拽2-带框拖拽</div>
32 </div>
33
34
35 <script type="text/javascript">
36 window.onload=function(){
37 //拖拽3:结合DOM,带框的拖拽
38 var oDragDiv1=document.getElementById(‘dragDiv1‘);
39 var oDrag1=document.getElementById(‘drag1‘);
40 oDrag1.onmousedown=function(ev){
41 var oEvent=ev||event;
42 var pos=getMousePosition(oEvent);
43 var disX=pos.x-oDrag1.offsetLeft;
44 var disY=pos.y-oDrag1.offsetTop;
45 //定义拖出来的框
46 var oBox=document.createElement(‘div‘);
47 oBox.className=‘box‘;
48 oBox.style.width=oDrag1.offsetWidth-2+‘px‘;
49 oBox.style.height=oDrag1.offsetHeight-2+‘px‘;
50 //每次拖动时,给虚框div的初始位置和红色实体初始位置相同,防止虚框闪动
51 oBox.style.left=oDrag1.offsetLeft+‘px‘;
52 oBox.style.top=oDrag1.offsetTop+‘px‘;
53 oDragDiv1.appendChild(oBox);
54 if(oBox.setCapture){
55 //兼容IE7-11
56 oBox.onmousemove=Mousemove;
57 oBox.onmouseup=mouseUp;
58 oBox.setCapture();
59 }else{
60 //兼容FF,Chrome
61 document.onmousemove=Mousemove;
62 document.onmouseup=mouseUp;
63 }
64
65 function getMousePosition(ev){
66 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
67 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
68 return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
69 };
70 //合并代码
71 function Mousemove(ev){
72 var oEvent=ev||event
73 var pis=getMousePosition(oEvent);
74 var l=pis.x-disX;
75 var t=pis.y-disY;
76
77 //3.限制范围,磁性吸附,快接近父级时,自动吸附上去
78 if (l<30) {
79 l=0;
80 }else if(l>oDragDiv1.offsetWidth-oBox.offsetWidth){
81 l=oDragDiv1.offsetWidth-oBox.offsetWidth;
82 }
83 if (t<30) {
84 t=0;
85 }else if(t>oDragDiv1.offsetHeight-oBox.offsetHeight){
86 t=oDragDiv1.offsetHeight-oBox.offsetHeight;
87 }
88 oBox.style.left=l+‘px‘;
89 oBox.style.top=t+‘px‘;
90 };
91 function mouseUp(){
92 //当鼠标抬起时,mousemove/up清空
93 this.onmousemove=null;
94 this.onmouseup=null;
95 oDrag1.style.left=oBox.offsetLeft+‘px‘;
96 oDrag1.style.top=oBox.offsetTop+‘px‘;
97 oDragDiv1.removeChild(oBox);
98 if (oBox.releaseCapture) {
99 oBox.releaseCapture();
100 }
101 };
102 return false; //FF中阻止默认行为
103 };
104 }
105 </script>
106 </body>
107 </html>
示例3:拖拽实现自定义滚动条
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style media="screen">
9 #scroll{
10 width: 500px;
11 height: 20px;
12 background: #ccc;
13 position: relative;
14 margin: 20px;
15 border-radius: 3px;
16 }
17 #drag2{
18 width: 20px;
19 height: 20px;
20 background: red;
21 border-radius: 3px;
22 position: absolute;
23 }
24 #scrollCtrl{
25 width: 150px;
26 height: 150px;
27 filter: alpha(opacity:0);
28 opacity: 0;
29 background: green;
30 margin: 20px;
31 }
32 #ctrlWords{
33 width: 300px;
34 height: 400px;
35 border: 1px solid #000;
36 margin: 20px;
37 position: relative;
38 overflow: hidden;
39 }
40 #words{
41 position: absolute;
42 top: 0;
43 left: 0;
44 }
45 </style>
46 </head>
47 <body>
48 <div id="scroll">
49 <div id="drag2"></div>
50 </div>
51 <div id="scrollCtrl"></div>
52
53 <div id="ctrlWords">
54 <div id="words">
55 每天开心快乐的生活是我们每个人追求的目标，有人孜孜不倦，苦苦追寻，仍找不到快乐的影踪。有人默默不语，静静守候，快乐总是如期而至，伴其左右。
56
57 一名记者到一个集市上采访，他看到一个年迈的老太太在一个角落里卖柠檬，“柠檬！柠檬！五毛钱一个！”老人有气无力地喊着，老太太的生意显然不太好，一上午也没卖几个。记者动了恻隐之心，打算把老太太的柠檬全部买下来，以使她能“高高兴兴地早些回家”。当他把自己的想法告诉老太太时，老太太的回答让他大吃一惊：“我现在都卖给你了，那我下午卖什么”。
58
59 快乐对于这位老太太来说，就是踏踏实实的生活，体会身边发生的点滴事情。我们的眼睛有时会欺骗我们，我们认为该烦恼的人其实是快乐的，而我们以为会快乐的人却充满了烦恼。真实的生活，往往会给人们带来无穷乐趣，只要你懂得去感受，你一定会收获快乐。
60
61 有一位为了金钱忙得焦头烂额而且并不快乐的爸爸问女儿：“你快乐吗？”女儿高兴地回答说：“快乐”。迷惑不解的爸爸说：“那什么是快乐呢？”女儿天真地回答说：”比如现在，我们都吃完了晚饭，你陪我在楼顶看星星，我感觉很快乐。”迷惑的爸爸一下子就清楚了自己不快乐的原因了。
62
63 女孩的快乐如此简单，却是来自内心最真实的快乐。仔细体会，身边的一草一木，一花一叶，都能带给我们最纯真的快乐。心中平静喜悦，无论是仰望星空，还是低头赏花，是临水观鱼，还是听风赏雨，都是其乐无穷。
64 </div>
65 </div>
66
67
68 <script type="text/javascript">
69 window.onload=function(){
70 //自定义滚动条
71 var scroll=document.getElementById(‘scroll‘);
72 var oDrag2=document.getElementById(‘drag2‘);
73 var scrollCtrl=document.getElementById(‘scrollCtrl‘);
74 var ctrlWords=document.getElementById(‘ctrlWords‘);
75 var words=document.getElementById(‘words‘);
76 oDrag2.onmousedown=function(ev){
77 var oEvent=ev||event;
78 var pos=getMousePosition(oEvent);
79 var disX=pos.x-oDrag2.offsetLeft;
80 if(oDrag2.setCapture){
81 //兼容IE7-11
82 oDrag2.onmousemove=Mousemove;
83 oDrag2.onmouseup=mouseUp;
84 oDrag2.setCapture();
85 }else{
86 //兼容FF,Chrome
87 document.onmousemove=Mousemove;
88 document.onmouseup=mouseUp;
89 }
90
91 function getMousePosition(ev){
92 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
93 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
94 return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
95 };
96 //合并代码
97 function Mousemove(ev){
98 var oEvent=ev||event
99 var pis=getMousePosition(oEvent);
100 var l=pis.x-disX;
101
102 //3.限制范围
103 if (l<0) {
104 l=0;
105 }else if(l>scroll.offsetWidth-oDrag2.offsetWidth){
106 l=scroll.offsetWidth-oDrag2.offsetWidth;
107 }
108 oDrag2.style.left=l+‘px‘;
109 //百分数scale0-100%
110 var scale=l/(scroll.offsetWidth-oDrag2.offsetWidth);
111 scrollCtrl.style.filter=‘alpha(opacity:‘+scale*100+‘)‘;
112 scrollCtrl.style.opacity=scale;
113 words.style.top=-scale*(words.offsetHeight-ctrlWords.offsetHeight)+‘px‘;
114 };
115 function mouseUp(){
116 //当鼠标抬起时,mousemove/up清空
117 this.onmousemove=null;
118 this.onmouseup=null;
119 if (oDrag2.releaseCapture) {
120 oDrag2.releaseCapture();
121 }
122 };
123 return false; //FF中阻止默认行为
124 };
125 }
126 </script>
127 </body>
128 </html>
以上是关于JS—实现拖拽的主要内容，如果未能解决你的问题，请参考以下文章