▓▓▓▓▓▓ 大致介绍

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

　　效果：拖拽改变元素大小

▓▓▓▓▓▓ 拖拽改变元素大小原理

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

　　

　　当我们点击方块的这些红色区域时，方快就知道我们想要改变它的大小

　　代码实现：

 // 获取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动画-拖拽改变元素大小的更多相关文章

  1. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  2. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  3. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  4. JQuery拖拽改变元素的尺寸

    "元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...

  5. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  6. Winform拖拽改变无边框窗体大小

    大家在进行Winform开发过程中,很容易就可以完成一个窗口的布局工作,但现在的软件界面美化效果一个比一个好,很多软件都是无边框的,于是乎,你是不是也感叹:winform的带边框的窗体如此丑陋,我一定 ...

  7. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  8. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  9. jQuery实现类似Chrome控制台可拖拽改变宽度的样式

    最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...

随机推荐

  1. docker——容器安装tomcat

    写在前面: 继续docker的学习,学习了docker的基本常用命令之后,我在docker上安装jdk,tomcat两个基本的java web工具,这里对操作流程记录一下. 软件准备: 1.jdk-7 ...

  2. Java 输出流中的flush方法

    转自:http://blog.csdn.net/jiyangsb/article/details/50984440 java中的IO流中的输出流一般都有flush这个操作,这个操作的作用是强制将缓存中 ...

  3. 展望未来：使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...

  4. [自翻]fasthttp中文文档（持续更新）

    fasthttp是由valyala编写的声称快于Go官方标准库net/http包十倍的快速HTTP实现.从各方的性能测试结果来看(评测一.评测二),fasthttp作为当下最快的http Go语言包当 ...

  5. 代码的坏味道（18）——依恋情结(Feature Envy)

    坏味道--依恋情结(Feature Envy) 特征 一个函数访问其它对象的数据比访问自己的数据更多. 问题原因 这种气味可能发生在字段移动到数据类之后.如果是这种情况,你可能想将数据类的操作移动到这 ...

  6. java中if和switch哪个效率快

    首先要看一个问题,if 语句适用范围比较广,只要是 boolean 表达式都可以用 if 判断:而 switch 只能对基本类型进行数值比较.两者的可比性就仅限在两个基本类型比较的范围内.说到基本类型 ...

  7. js 入门级常见问题

    写在前面:以下是个人总结的关于js常见的入门级的问题一些总结. js是有 ECMAScript Dom Bom 三部分组成. 1,undefined,NaN,Null,infinity 1) unde ...

  8. Angular2 Hello World 之 RC6

    angular2还没有发布正式版,确实有点不靠谱,变化太频繁,之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于RC6.参考:http://web3.code ...

  9. Android—ListView条目背景为图片时，条目间距问题解决

    ListView是android开发中使用最普遍的控件了,可有的listView条目的内容颇为丰富,甚至为了美观,背景用指定图片,如下图:

  10. SQL*Plus生成html文件

    最近使用SQL*Plus命令生成html文件,遇到一些有意思的知识点,顺便记录一下,方便以后需要的时候而这些知识点又忘记而捉急.好记性不如烂笔头吗! 为什么要用SQL*Plus生成html文件?   ...