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

2022-10-30 15:35:56

▓▓▓▓▓▓ 大致介绍

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

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

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

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

　　代码实现：

 // 获取event对象，兼容性写法

             var ev = ev || event;

             // 鼠标按下时的位置

             var mouseDownX = ev.clientX;

             var mouseDownY = ev.clientY;

             // 方块上下左右四个边的位置和方块的长宽

             var T0 = this.offsetTop;

             var B0 = this.offsetTop + this.offsetHeight;

             var L0 = this.offsetLeft;

             var R0 = this.offsetLeft + this.offsetWidth;

             var W = this.offsetWidth;

             var H = this.offsetHeight;

             // 设置方块的识别范围

             var areaT = T0 + 10;

             var areaB = B0 - 10;

             var areaL = L0 + 10;

             var areaR = R0 - 10;

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

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

　　代码实现：

             // 判断改变方块的大小的方向

             // 左

             var changeL = mouseDownX < areaL;

             // 右

             var changeR = mouseDownX > areaR;

             // 上

             var changeT = mouseDownY < areaT;

             // 下

             var changeB = mouseDownY > areaB;

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

　　代码实现：

                 //根据改变方块大小的方向不同进行大小的改变

                 // 左

                 if(changeL){

                     oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';

                     oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';

                 }

                 // 右

                 if(changeR){

                     oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';

                 }

                 // 上

                 if(changeT){

                     oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';

                     oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';

                 }

                 // 下

                 if(changeB){

                     oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';

                 }

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

▓▓▓▓▓▓ 代码优化

　　未优化前的代码：

     var oDiv = document.getElementById('div1');

         oDiv.onmousedown = function(ev){

             // 获取event对象，兼容性写法

             var ev = ev || event;

             // 鼠标按下时的位置

             var mouseDownX = ev.clientX;

             var mouseDownY = ev.clientY;

             // 方块上下左右四个边的位置和方块的长宽

             var T0 = this.offsetTop;

             var B0 = this.offsetTop + this.offsetHeight;

             var L0 = this.offsetLeft;

             var R0 = this.offsetLeft + this.offsetWidth;

             var W = this.offsetWidth;

             var H = this.offsetHeight;

             // 设置方块的识别范围

             var areaT = T0 + 10;

             var areaB = B0 - 10;

             var areaL = L0 + 10;

             var areaR = R0 - 10;

             // 判断改变方块的大小的方向

             // 左

             var changeL = mouseDownX < areaL;

             // 右

             var changeR = mouseDownX > areaR;

             // 上

             var changeT = mouseDownY < areaT;

             // 下

             var changeB = mouseDownY > areaB;

             oDiv.onmousemove = function(ev){

                 var ev = ev || event;

                 // 鼠标移动时的鼠标位置

                 var mouseMoveX = ev.clientX;

                 var mouseMoveY = ev.clientY;

                 //根据改变方块大小的方向不同进行大小的改变

                 // 左

                 if(changeL){

                     oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';

                     oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';

                 }

                 // 右

                 if(changeR){

                     oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';

                 }

                 // 上

                 if(changeT){

                     oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';

                     oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';

                 }

                 // 下

                 if(changeB){

                     oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';

                 }

                 // 限定范围

                 if(parseInt(oDiv.style.width) < 50){

                     oDiv.style.width = 50 + 'px';

                 }

                 if(parseInt(oDiv.style.height) < 50){

                     oDiv.style.height = 50 + 'px';

                 }

             }

             oDiv.onmouseup = function(){

                 oDiv.onmousemove = null;

             }

         }

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

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

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

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

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

　　　　　　　　　　　　　　在onmousedown中添加语句 return false

　　　　　　　　　　　2、设置全局捕获（IE8）

　　　　　　　　　　　　　　在onmousedown中设置全局捕获

　　　　　　　　　　　　　　在onmouseup中取消全局捕获　　

　　优化后的代码：

 <div id="div1">adfadsf</div>

     <script type="text/javascript">

         var oDiv = document.getElementById('div1');

         oDiv.onmousedown = function(ev){

             // 获取event对象，兼容性写法

             var ev = ev || event;

             // 鼠标按下时的位置

             var mouseDownX = ev.clientX;

             var mouseDownY = ev.clientY;

             // 方块上下左右四个边的位置和方块的长宽

             var T0 = this.offsetTop;

             var B0 = this.offsetTop + this.offsetHeight;

             var L0 = this.offsetLeft;

             var R0 = this.offsetLeft + this.offsetWidth;

             var W = this.offsetWidth;

             var H = this.offsetHeight;

             // 设置方块的识别范围

             var areaT = T0 + 10;

             var areaB = B0 - 10;

             var areaL = L0 + 10;

             var areaR = R0 - 10;

             // 判断改变方块的大小的方向

             // 左

             var changeL = mouseDownX < areaL;

             // 右

             var changeR = mouseDownX > areaR;

             // 上

             var changeT = mouseDownY < areaT;

             // 下

             var changeB = mouseDownY > areaB;

             // IE8 取消默认行为-设置全局捕获

             if(oDiv.setCapture){

                 oDiv.setCapture();

             }

             document.onmousemove = function(ev){

                 var ev = ev || event;

                 // 鼠标移动时的鼠标位置

                 var mouseMoveX = ev.clientX;

                 var mouseMoveY = ev.clientY;

                 //根据改变方块大小的方向不同进行大小的改变

                 // 左

                 if(changeL){

                     oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';

                     oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';

                 }

                 // 右

                 if(changeR){

                     oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';

                 }

                 // 上

                 if(changeT){

                     oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';

                     oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';

                 }

                 // 下

                 if(changeB){

                     oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';

                 }

                 // 限定范围

                 if(parseInt(oDiv.style.width) < 50){

                     oDiv.style.width = 50 + 'px';

                 }

                 if(parseInt(oDiv.style.height) < 50){

                     oDiv.style.height = 50 + 'px';

                 }

             }

             document.onmouseup = function(){

                 document.onmousemove = null;

                 // 释放全局捕获

                 if(oDiv.releaseCapture){

                     oDiv.releaseCapture();

                 }

             }

             return false;

         }

码农公寓

▓▓▓▓▓▓ 大致介绍

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

▓▓▓▓▓▓ 代码优化

相关文章