JavaScript动画-模拟拖拽

Posted 老板丶鱼丸粗面

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript动画-模拟拖拽相关的知识,希望对你有一定的参考价值。

模拟拖拽的原理:

x1等于div.offsetLeft

y1等于div.offsetTop

x2等于ev.clientX(ev表示event事件)

y2等于ev.clientY

当我们在方块上按下鼠标的时候,x2-x1即可确定。移动鼠标之后,我们用鼠标当前的位置即x4、y4减去x2-x1、y2-y1就可以得到方块现在的位置。

效果图:点击查看

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #box{
 8             width: 100px;
 9             height: 100px;
10             background: red;
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16     
17     <div id="box"></div>
18     <script type="text/javascript">
19     var oBox = document.getElementById(\'box\');
20 
21     oBox.onmousedown = function(ev){
22     // 鼠标按下
23 
24     var ev = ev || event;
25 
26     // 获取鼠标离div得距离
27     var mouseBoxleft = ev.clientX - this.offsetLeft;
28     var mouseBoxTop = ev.clientY - this.offsetTop;
29 
30         oBox.onmousemove = function(ev){
31         // 鼠标按下左键并移动    
32 
33         var ev = ev || event;
34 
35         // 设置div移动时,它的位置
36         oBox.style.left = ev.clientX - mouseBoxleft + \'px\';
37         oBox.style.top = ev.clientY - mouseBoxleft + \'px\';
38 
39         }
40 
41         oBox.onmouseup = function(){
42         // 鼠标左键抬起    
43 
44         oBox.onmousemove = oBox.onmouseup = null;
45         }
46     }
47     </script>
48 </body>
49 </html>

 

优化代码:

  【1】鼠标移动快的时候,鼠标会移出方块,这时方块就不会再跟随鼠标动了。

      解决办法:就是将onmousemove和onmouseup加到document对象上

效果:点击查看

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #box{
 8             width: 100px;
 9             height: 100px;
10             background: red;
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16     
17     <div id="box"></div>
18     <script>
19     var oBox = document.getElementById(\'box\');
20 
21     oBox.onmousedown = function(ev){
22     // 鼠标按下
23 
24     var ev = ev || event;
25 
26     // 获取鼠标离div得距离
27     var mouseBoxleft = ev.clientX - this.offsetLeft;
28     var mouseBoxTop = ev.clientY - this.offsetTop;
29 
30         document.onmousemove = function(ev){
31         // 鼠标按下左键并移动    
32 
33         var ev = ev || event;
34 
35         // 设置div移动时,它的位置
36         oBox.style.left = ev.clientX - mouseBoxleft + \'px\';
37         oBox.style.top = ev.clientY - mouseBoxleft + \'px\';
38 
39         }
40 
41         document.onmouseup = function(){
42         // 鼠标左键抬起    
43 
44         document.onmousemove = document.onmouseup = null;
45         }
46     }
47     </script>
48 </body>
49 </html>

 

  【2】当要拖动的方块中有文字时会触发浏览器的默认行为

      解决办法:1、使用return false添加到onmousedown事件中阻止浏览器的默认行为(IE除外)

           2、使用全局捕获(IE)

 

 1、使用return false添加到onmousedown事件中阻止浏览器的默认行为(IE除外)

效果:点击查看

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #box{
 8             width: 100px;
 9             height: 100px;
10             background: red;
11             position: absolute;
12             top: 0;
13             left: 0;
14         }
15     </style>
16 </head>
17 <body>
18     
19     <div id="box">模拟拖拽</div>
20     <script>
21     var oBox = document.getElementById(\'box\');
22 
23     oBox.onmousedown = function(ev){
24         // 鼠标按下
25 
26         var ev = ev || event;
27         // 获取鼠标离div得距离
28         var mouseBoxleft = ev.clientX - this.offsetLeft;
29         var mouseBoxTop = ev.clientY - this.offsetTop;
30 
31         document.onmousemove = function(ev){
32         // 鼠标按下左键并移动    
33 
34             var ev = ev || event;
35 
36             // 设置div移动时,它的位置
37             oBox.style.left = ev.clientX - mouseBoxleft + \'px\';
38             oBox.style.top = ev.clientY - mouseBoxleft + \'px\';
39 
40         }
41 
42         document.onmouseup = function(){
43         // 鼠标左键抬起    
44 
45             document.onmousemove = document.onmouseup = null;
46         }
47 
48         // 阻止默认行为
49         return false;
50     }
51     </script>
52 </body>
53 </html>

 

2、使用全局捕获(IE)

  全局捕获:当我们给一个元素这只全局捕获后,改元素会监听后续发生的所有事件,当有事件发生的时候就会触发改元素的事件

  举个栗子:点击查看

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="button" id="button1" value="弹出1" />
 9     <input type="button" id="button2" value="弹出2" />
10     <script type="text/javascript">
11     window.onload = function(){
12         var Btn1 = document.getElementById(\'button1\');
13         var Btn2 = document.getElementById(\'button2\');
14 
15         Btn1.setCapture();
16 
17         Btn1.onclick = function(){
18             alert(1);
19         }
20         Btn2.onclick = function(){
21             alert(2);
22         }
23 
24 
25     }
26     </script>
27 </body>
28 </html>

给Btn1设置了全局捕获之后,即使我们点击了Btn2还是会触发Btn1的点击事件

 

在模拟拖拽中,给要拖拽的方块onmousedown添加全局捕获然后再onmouseup中取消全局捕获

效果:点击查看

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #box{
 8             width: 100px;
 9             height: 100px;
10             background: red;
11             position: absolute;
12 
13         }
14     </style>
15 </head>
16 <body>
17     
18     <div id="box">模拟拖拽</div>
19     <script>
20     var oBox = document.getElementById(\'box\');
21 
22     oBox.onmousedown = function(ev){
23         // 鼠标按下
24 
25         var ev = ev || event;
26 
27         // 获取鼠标离div得距离
28         var mouseBoxleft = ev.clientX - this.offsetLeft;
29         var mouseBoxTop = ev.clientY - this.offsetTop;
30 
31         // IE浏览器,全局捕获
32         if(oBox.setCapture){
33             oBox.setCapture();
34         }
35 
36         document.onmousemove = function(ev){
37         // 鼠标按下左键并移动    
38 
39             var ev = ev || event;
40 
41             // 设置div移动时,它的位置
42             oBox.style.left = ev.clientX - mouseBoxleft + \'px\';
43             oBox.style.top = ev.clientY - mouseBoxleft + \'px\';
44 
45         }
46 
47         document.onmouseup = function(){
48         // 鼠标左键抬起    
49 
50             document.onmousemove = document.onmouseup = null;
51 
52             //IE下,释放全局捕获 releaseCapture();
53             if ( oBox.releaseCapture ) {
54                 oBox.releaseCapture();
55             }
56         }
57 
58         // 阻止默认行为
59         return false;
60     }
61     </script>
62 </body>
63 </html>

  

  【3】封装模拟拖拽函数

效果:点击查看

 代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #box{
 8             width: 100px;
 9             height: 100px;
10             background: red;
11             position: absolute;
12 
13         }
14     </style>
15 </head>
16 <body>
17     
18     <div id="box">模拟拖拽</div>
19     <script>
20     var oBox = document.getElementById(\'box\');
21 
22     drag(oBox);
23 
24     function drag(obj){
25         obj.onmousedown = function(ev){
26             // 鼠标按下
27 
28             var ev = ev || event;
29 
30             // 获取鼠标离div得距离
31             var mouseBoxleft = ev.clientX - this.offsetLeft;
32             var mouseBoxTop = ev.clientY - this.offsetTop;
33 
34             // IE浏览器,全局捕获
35             if(obj.setCapture){
36                 obj.setCapture();
37             }
38 
39             document.onmousemove = function(ev){
40             // 鼠标按下左键并移动    
41 
42                 var ev = ev || event;
43 
44                 // 设置div移动时,它的位置
45                 obj.style.left = ev.clientX - mouseBoxleft + \'px\';
46                 obj.style.top = ev.clientY - mouseBoxleft + \'px\';
47 
48             }
49 
50             document.onmouseup = function(){
51             // 鼠标左键抬起    
52 
53                 document.onmousemove = document.onmouseup = null;
54 
55                 //IE下,释放全局捕获 releaseCapture();
56                 if ( obj.releaseCapture ) {
57                     obj.releaseCapture();
58                 }
59             }
60 
61             // 阻止默认行为
62             return false;
63         }
64     }
65 
66     </script>
67 </body>
68 </html>

 

以上是关于JavaScript动画-模拟拖拽的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript动画-磁性吸附

javascript动画系列第五篇——模拟滚动条

JavaScript动画-碰撞检测

javascript动画系列第三篇——碰撞检测

javascript动画系列第四篇——拖拽改变元素大小

javascript动画系列第二篇——磁性吸附