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

时间:2022-05-24 12:30:12

▓▓▓▓▓▓ 大致介绍

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

  效果:拖拽改变元素大小

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

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

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

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

  代码实现:

 // 获取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;
}