利用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;
    }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js  # 拖拽  # javascript  # vuejs2.0运用原生js实现简单拖拽元素功能  # vuejs2.0运用原生js实现简单的拖拽元素功能示例  # JavaScript实现拖拽元素对齐到网格（每次移动固定距离）  # jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载  # JavaScript实现拖拽网页内元素的方法  # javascript实现拖拽并替换网页块元素  # js实现拖拽元素选择和删除  # 鼠标  # 上下左右  # 按下  # 长宽  # 是在  # 就不  # 最重要  # 中有  # 这段  # 当我们  # 拖动  # 哪种  # 过快  # 时要  # 绑定  # 给它  # 变大  # 拖放  # 增加了 

相关文章： 一键制作网站软件下载安装,一键自动采集网页文档制作步骤？  如何挑选最适合建站的高性能VPS主机？  建站之星ASP如何实现CMS高效搭建与安全管理？  建站之星如何助力网站排名飙升？揭秘高效技巧  建站VPS配置与SEO优化指南：关键词排名提升策略  如何在Golang中使用replace替换模块_指定本地或远程路径  如何快速搭建高效WAP手机网站吸引移动用户？  如何通过虚拟机搭建网站？详细步骤解析  高防服务器如何保障网站安全无虞？  如何在腾讯云服务器上快速搭建个人网站？  专业网站建设制作报价,网页设计制作要考什么证？  购物网站制作公司有哪些,哪个购物网站比较好？  Swift中switch语句区间和元组模式匹配  如何在腾讯云服务器快速搭建个人网站？  在线制作视频网站免费,都有哪些好的动漫网站？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  建站之星Pro快速搭建教程：模板选择与功能配置指南  ppt制作免费网站有哪些,ppt模板免费下载网站？  较简单的网站制作软件有哪些,手机版网页制作用什么软件？  建设网站制作价格,怎样建立自己的公司网站？  电商平台网站制作流程,电商网站如何制作？  建站之星后台搭建步骤解析：模板选择与产品管理实操指南  建站三合一如何选？哪家性价比更高？  如何通过NAT技术实现内网高效建站？  如何批量查询域名的建站时间记录？  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站？  如何在建站之星绑定自定义域名？  北京网站制作网页,网站升级改版需要多久？  网站制作公司广州有几家,广州尚艺美发学校网站是多少？  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情？  如何快速搭建高效WAP手机网站？  如何制作网站标识牌,动态网站如何制作（教程）？  如何基于云服务器快速搭建网站及云盘系统？  成都响应式网站开发,dw怎么把手机适应页面变成网页？  香港服务器部署网站为何提示未备案？  宠物网站制作html代码,有没有专门介绍宠物如何养的网站啊？  建站之星免费版是否永久可用？  建站之星CMS五站合一模板配置与SEO优化指南  广州商城建站系统开发成本与周期如何控制？  建站之星24小时客服电话如何获取？  定制建站方案优化指南：企业官网开发与建站费用解析  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  无锡营销型网站制作公司,无锡网选车牌流程？  5种Android数据存储方式汇总  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  网站制作公司排行榜,四大门户网站排名？  建站之星备案流程有哪些注意事项？  网站设计制作企业有哪些,抖音官网主页怎么设置？  常州自助建站工具推荐：低成本搭建与模板选择技巧