大致介绍

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

拖拽改变元素大小原理

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

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

代码实现：

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

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 中山网站制作网页,中山新生登记系统登记流程？  zabbix利用python脚本发送报警邮件的方法  高防服务器：AI智能防御DDoS攻击与数据安全保障  网站制作企业,网站的banner和导航栏是指什么？  EditPlus中的正则表达式实战(6)  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  如何在IIS管理器中快速创建并配置网站？  轻松掌握MySQL函数中的last_insert_id()  悟空识字如何进行跟读录音_悟空识字开启麦克风权限与录音  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  Laravel如何处理和验证JSON类型的数据库字段  详解jQuery中的事件  如何在Windows环境下新建FTP站点并设置权限？  Laravel安装步骤详细教程_Laravel环境搭建指南  如何用美橙互联一键搭建多站合一网站？  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  如何在万网自助建站中设置域名及备案？  昵图网官网入口 昵图网素材平台官方入口  微信小程序 五星评分(包括半颗星评分)实例代码  php485函数参数是什么意思_php485各参数详细说明【介绍】  Laravel如何处理CORS跨域请求？（配置示例）  如何用wdcp快速搭建高效网站？  如何用IIS7快速搭建并优化网站站点？  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  详解jQuery停止动画——stop()方法的使用  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  Swift中swift中的switch 语句  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  香港服务器租用每月最低只需15元？  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】  JavaScript数据类型有哪些_如何准确判断一个变量的类型  北京的网站制作公司有哪些,哪个视频网站最好？  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  Laravel集合Collection怎么用_Laravel集合常用函数详解  进行网站优化必须要坚持的四大原则  Laravel如何处理异常和错误？（Handler示例）  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  如何为不同团队 ID 动态生成多个“认领值班”按钮  什么是javascript作用域_全局和局部作用域有什么区别？  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  如何在搬瓦工VPS快速搭建网站？