利用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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
vue实现弹幕功能
Oct 25 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中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
深入理解js函数的作用域与this指向
2016/05/28 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python中的super用法详解
2015/05/28 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python数据结构之单链表详解
2017/09/12 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
python实现按日期归档文件
2021/01/30 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
行政助理的职责
2013/11/14 职场文书
运动会方阵解说词
2014/02/12 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript