利用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实现拖拽元素选择和删除  # 鼠标  # 上下左右  # 按下  # 长宽  # 是在  # 就不  # 最重要  # 中有  # 这段  # 当我们  # 拖动  # 哪种  # 过快  # 时要  # 绑定  # 给它  # 变大  # 拖放  # 增加了 

相关文章： 建站主机选购指南：核心配置优化与品牌推荐方案  手机网站制作与建设方案,手机网站如何建设？  如何有效防御Web建站篡改攻击？  太平洋网站制作公司,网络用语太平洋是什么意思？  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  广东企业建站网站优化与SEO营销核心策略指南  如何在IIS服务器上快速部署高效网站？  Swift开发中switch语句值绑定模式  已有域名建站全流程解析：网站搭建步骤与建站工具选择  打鱼网站制作软件,波克捕鱼官方号怎么注册？  建站VPS配置与SEO优化指南：关键词排名提升策略  专业网站建设制作报价,网页设计制作要考什么证？  公司门户网站制作流程,华为官网怎么做？  Thinkphp 中 distinct 的用法解析  建站之星代理费用多少？最新价格详情介绍  湖州网站制作公司有哪些,浙江中蓝新能源公司官网？  建站之星展会模版如何一键下载生成？  如何快速配置高效服务器建站软件？  网站制作难吗安全吗,做一个网站需要多久时间？  制作网站的软件下载免费,今日头条开宝箱老是需要下载怎么回事？  广东专业制作网站有哪些,广东省能源集团有限公司官网？  如何在阿里云通过域名搭建网站？  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  高端云建站费用究竟需要多少预算？  宝塔面板如何快速创建新站点？  建站之星安装后如何配置SEO及设计样式？  建站VPS选购需注意哪些关键参数？  如何在搬瓦工VPS快速搭建网站？  如何制作算命网站,怎么注册算命网站？  如何选择适合PHP云建站的开源框架？  南平网站制作公司,2025年南平市事业单位报名时间？  北京的网站制作公司有哪些,哪个视频网站最好？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  如何用PHP快速搭建CMS系统？  MySQL查询结果复制到新表的方法(更新、插入)  自助网站制作软件,个人如何自助建网站？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  建站主机服务器选购指南：轻量应用与VPS配置解析  如何用PHP工具快速搭建高效网站？  香港服务器如何优化才能显著提升网站加载速度？  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  开封网站制作公司,网络用语开封是什么意思？  ,石家庄四十八中学官网？  如何快速搭建高效WAP手机网站？  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  如何快速查询域名建站关键信息？  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  常州企业网站制作公司,全国继续教育网怎么登录？  建站主机解析：虚拟主机配置与服务器选择指南  官网网站制作腾讯审核要多久,联想路由器newifi官网