利用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 相关文章推荐
TypeScript 学习笔记之基本类型
Jun 19 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
axios基本入门用法教程
Mar 25 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
第1次亲密接触PHP5(1)
2006/10/09 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
python二叉树的实现实例
2013/11/21 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python二分法搜索算法实例分析
2015/05/11 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
深入浅析python with语句简介
2018/04/11 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
详解Python正则表达式re模块
2019/03/19 Python
Python发展简史 Python来历
2019/05/14 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
升旗仪式主持词
2014/03/19 职场文书
蓝颜请假条
2014/04/11 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
运动会主持人开幕词
2016/03/04 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis