JavaScript动画-拖拽改变元素大小

▓▓▓▓▓▓ 大致介绍

　　拖拽改变元素大小是在模拟拖拽上增加了一些功能

　　效果：拖拽改变元素大小

 

▓▓▓▓▓▓ 拖拽改变元素大小原理

　　首先这个方块得知道我们想要改变这个它的大小，所以我给它设定一个范围，当点击这个范围时表明我们想要改变它的大小

　　

　　当我们点击方块的这些红色区域时，方快就知道我们想要改变它的大小

　　代码实现：

 1 // 获取event对象，兼容性写法
 2             var ev = ev || event;
 3 
 4             // 鼠标按下时的位置
 5             var mouseDownX = ev.clientX;
 6             var mouseDownY = ev.clientY;
 7 
 8             // 方块上下左右四个边的位置和方块的长宽
 9             var T0 = this.offsetTop;
10             var B0 = this.offsetTop + this.offsetHeight;
11             var L0 = this.offsetLeft;
12             var R0 = this.offsetLeft + this.offsetWidth;
13             var W = this.offsetWidth;
14             var H = this.offsetHeight;
15 
16             // 设置方块的识别范围
17             var areaT = T0 + 10;
18             var areaB = B0 - 10;
19             var areaL = L0 + 10;
20             var areaR = R0 - 10;

　　其中areaT、areaB、areaL、areaR就是红色的区域

　　

　　接下来方块知道我们想要改变它的大小了，但是要怎么改变，朝哪种方向改变大小。所以要判断改变大小的方向

　　代码实现：

1             // 判断改变方块的大小的方向
2             // 左
3             var changeL = mouseDownX < areaL;
4             // 右
5             var changeR = mouseDownX > areaR;
6             // 上
7             var changeT = mouseDownY < areaT;
8             // 下
9             var changeB = mouseDownY > areaB;

　　

　　接下来就是最重要的改变样式了

　　代码实现：

 1                 //根据改变方块大小的方向不同进行大小的改变
 2                 // 左
 3                 if(changeL){
 4                     oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
 5                     oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
 6                 }
 7                 // 右
 8                 if(changeR){
 9                     oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
10                 }
11                 // 上
12                 if(changeT){
13                     oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
14                     oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
15                 }
16                 // 下
17                 if(changeB){
18                     oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
19                 }

　　注意：在改变左侧和上侧时要同时修改方块的位置，不然会出现拖左侧边而右侧边位置扩大的现象（拖动上侧边下侧边位置变大）

 

▓▓▓▓▓▓ 代码优化

　　未优化前的代码：

 1     var oDiv = document.getElementById('div1');
 2 
 3         oDiv.onmousedown = function(ev){
 4 
 5             // 获取event对象，兼容性写法
 6             var ev = ev || event;
 7 
 8             // 鼠标按下时的位置
 9             var mouseDownX = ev.clientX;
10             var mouseDownY = ev.clientY;
11 
12             // 方块上下左右四个边的位置和方块的长宽
13             var T0 = this.offsetTop;
14             var B0 = this.offsetTop + this.offsetHeight;
15             var L0 = this.offsetLeft;
16             var R0 = this.offsetLeft + this.offsetWidth;
17             var W = this.offsetWidth;
18             var H = this.offsetHeight;
19 
20             // 设置方块的识别范围
21             var areaT = T0 + 10;
22             var areaB = B0 - 10;
23             var areaL = L0 + 10;
24             var areaR = R0 - 10;
25 
26             // 判断改变方块的大小的方向
27             // 左
28             var changeL = mouseDownX < areaL;
29             // 右
30             var changeR = mouseDownX > areaR;
31             // 上
32             var changeT = mouseDownY < areaT;
33             // 下
34             var changeB = mouseDownY > areaB;
35 
36             oDiv.onmousemove = function(ev){
37 
38                 var ev = ev || event;
39 
40                 // 鼠标移动时的鼠标位置
41                 var mouseMoveX = ev.clientX;
42                 var mouseMoveY = ev.clientY;
43 
44                 //根据改变方块大小的方向不同进行大小的改变
45                 // 左
46                 if(changeL){
47                     oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
48                     oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
49                 }
50                 // 右
51                 if(changeR){
52                     oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
53                 }
54                 // 上
55                 if(changeT){
56                     oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
57                     oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
58                 }
59                 // 下
60                 if(changeB){
61                     oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
62                 }
63 
64                 // 限定范围
65                 if(parseInt(oDiv.style.width) < 50){
66                     oDiv.style.width = 50 + 'px';
67                 }
68                 if(parseInt(oDiv.style.height) < 50){
69                     oDiv.style.height = 50 + 'px';
70                 }
71 
72             }
73 
74             oDiv.onmouseup = function(){
75                 oDiv.onmousemove = null;
76             }
77         }

　　

　　这段代码现在主要有两个问题：

　　　　1、当鼠标移动过快移出方块时，就不能够继续改变元素的大小了

　　　　　　解决方案：把onmousemove事件和onmouseup事件绑定到document对象上

　　　　2、当方块中有文字时，拖拽改变方块大小时会触发浏览器默认的原生拖放行为

　　　　　　解决方案：1、阻止浏览器的默认行为（IE8浏览器除外）

　　　　　　　　　　　　　　在onmousedown中添加语句 return false

　　　　　　　　　　　2、设置全局捕获（IE8）

　　　　　　　　　　　　　　在onmousedown中设置全局捕获

　　　　　　　　　　　　　　在onmouseup中取消全局捕获　　

　　优化后的代码：

 1 <div id="div1">adfadsf</div>
 2     <script type="text/javascript">
 3         var oDiv = document.getElementById('div1');
 4 
 5         oDiv.onmousedown = function(ev){
 6 
 7             // 获取event对象，兼容性写法
 8             var ev = ev || event;
 9 
10             // 鼠标按下时的位置
11             var mouseDownX = ev.clientX;
12             var mouseDownY = ev.clientY;
13 
14             // 方块上下左右四个边的位置和方块的长宽
15             var T0 = this.offsetTop;
16             var B0 = this.offsetTop + this.offsetHeight;
17             var L0 = this.offsetLeft;
18             var R0 = this.offsetLeft + this.offsetWidth;
19             var W = this.offsetWidth;
20             var H = this.offsetHeight;
21 
22             // 设置方块的识别范围
23             var areaT = T0 + 10;
24             var areaB = B0 - 10;
25             var areaL = L0 + 10;
26             var areaR = R0 - 10;
27 
28             // 判断改变方块的大小的方向
29             // 左
30             var changeL = mouseDownX < areaL;
31             // 右
32             var changeR = mouseDownX > areaR;
33             // 上
34             var changeT = mouseDownY < areaT;
35             // 下
36             var changeB = mouseDownY > areaB;
37 
38             // IE8 取消默认行为-设置全局捕获
39             if(oDiv.setCapture){
40                 oDiv.setCapture();
41             }
42 
43             document.onmousemove = function(ev){
44 
45                 var ev = ev || event;
46 
47                 // 鼠标移动时的鼠标位置
48                 var mouseMoveX = ev.clientX;
49                 var mouseMoveY = ev.clientY;
50 
51                 //根据改变方块大小的方向不同进行大小的改变
52                 // 左
53                 if(changeL){
54                     oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
55                     oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
56                 }
57                 // 右
58                 if(changeR){
59                     oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
60                 }
61                 // 上
62                 if(changeT){
63                     oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
64                     oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
65                 }
66                 // 下
67                 if(changeB){
68                     oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
69                 }
70 
71                 // 限定范围
72                 if(parseInt(oDiv.style.width) < 50){
73                     oDiv.style.width = 50 + 'px';
74                 }
75                 if(parseInt(oDiv.style.height) < 50){
76                     oDiv.style.height = 50 + 'px';
77                 }
78 
79             }
80 
81             document.onmouseup = function(){
82                 document.onmousemove = null;
83                 // 释放全局捕获
84                 if(oDiv.releaseCapture){
85                     oDiv.releaseCapture();
86                 }
87             }
88 
89             return false;
90         }

 

　

 

posted @ 2016-12-09 20:50  老板丶鱼丸粗面  阅读(826)  评论(0)  编辑  收藏  举报