利用JavaScript实现拖拽改变元素大小


Posted in Javascript onDecember 14, 2016

大致介绍

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

拖拽改变元素大小原理

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 #Javascript
浅谈Javascript中的Label语句
Dec 14 #Javascript
详解jQuery中基本的动画方法
Dec 14 #Javascript
浅析上传头像示例及其注意事项
Dec 14 #Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 #Javascript
jQuery 常见小例汇总
Dec 14 #Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 #Javascript
You might like
thinkphp浏览历史功能实现方法
2014/10/29 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
浅谈PHP中的
2016/04/23 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
详解js中Array的方法及技巧
2018/09/12 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
自荐信封面
2013/12/04 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
建房协议书
2014/04/11 职场文书
拓展训练激励口号
2014/06/17 职场文书
发布会邀请函
2015/01/31 职场文书
计划生育个人总结
2015/03/02 职场文书
钱学森电影观后感
2015/06/04 职场文书
盲山观后感
2015/06/11 职场文书
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python