利用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 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
vue全屏事件开发详解
Jun 17 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
vue路由的配置和页面切换详解
Sep 09 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
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
linux iconv方法的使用
2011/10/01 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
js 事件小结 表格区别
2007/08/13 Javascript
js 文件引入实现代码
2010/04/23 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Python实现Restful API的例子
2019/08/31 Python
python将数组n等分的实例
2019/12/02 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
服务行业口号
2014/06/11 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
北京导游词
2015/02/12 职场文书
2015年外联部工作总结
2015/04/03 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
Redis如何一键部署脚本
2021/04/12 Redis