利用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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python selenium操作cookie的实现
2020/03/18 Python
电大物流学生的自我评价
2013/10/25 职场文书
2014年部门工作总结
2014/11/12 职场文书
营业用房租赁协议书
2014/11/26 职场文书
检讨书范文2000字
2015/01/28 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
解析redis hash应用场景和常用命令
2021/08/04 Redis
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python