首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

鼠标拖动改变DIV等网页元素的大小的实现方法

Posted in Javascript onJuly 06, 2017

1.初次实现

1.1 html代码

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div change width by drag</title>
    <script src="../jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
  </head>

  <body>
    <h1>div change width by drag</h1>
    <div id="pos" style="color:red"></div>
    
    <div id="myDiv" style="border:2px solid red;width:300px;height:50px;margin-left: 100px;margin-top: 20px"></div>
  </body>
</html>

1.2 js代码

var eleLeft = $('#myDiv').offset().left;
        var isMouseDown = false;
        var borderLen = 4; //左右边框
        
        $('#myDiv').bind({
          mousedown:function(e){
            var ele = $(this);
            var rightPos = eleLeft + ele.width() + borderLen;
            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              isMouseDown = true;

            }
          },
      
          mousemove:function(e){
            var ele = $(this);
            var rightPos = eleLeft + ele.width() + borderLen;
            $('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);

            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              ele.css('cursor','e-resize');
            }else{
              if(!isMouseDown){
                ele.css('cursor','auto');
              }
            }
            if(isMouseDown){
              ele.width((e.pageX-eleLeft-borderLen)+'px'); //新鼠标位置-div距左-borderLen
            }
          },
          mouseup:function(e){
            isMouseDown = false;
          }
        });

1.3 结果

只能往左拖动使div宽度变小，往右拖动没有用！原因往右拖动鼠标mousemove事件无法被div捕获了。拖动时也很难停下来！所以得改进。

2.再次改进

$('#myDiv').bind({
          mousedown:function(e){
            var ele = $(this);
            var rightPos = eleLeft + ele.width() + borderLen;
            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              isMouseDown = true;
            }
          }
        });

        $('body').bind({
          mousemove:function(e){
            var ele = $('#myDiv');
            var rightPos = eleLeft + ele.width() + borderLen;
            $('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);

            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              ele.css('cursor','e-resize');
            }else{
              if(!isMouseDown){
                ele.css('cursor','auto');
              }
            }
            if(isMouseDown){
              ele.width((e.pageX-eleLeft-borderLen)+'px'); 
            }
          },
          mouseup:function(e){
            isMouseDown = false;
          }
        });

这次解决了上述问题，可以往右拖，并且随时可以停下来了。到这里就完成了吗？NO!

当我引入一个其他div，并且阻止mouseup事件冒泡情况怎么样呢？答案是，拖动到这个其它div上放开鼠标后无法停止下来！

<div id="otherDiv" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>
 




　$('#otherDiv').mouseup(function(e){
          //e.preventDefault(); //阻止默认行为
          e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)
        });

3.完美解决

拖动停止可能受到其它元素的干扰，怎么解决？想到一些弹出层点击其它其它地方隐藏的功能，让我想到了，加一个遮罩层，让mouseup事件总是可以响应，不就搞定了嘛！

$('#myDiv').bind({
          mousedown:function(e){
            var ele = $(this);
            var rightPos = eleLeft + ele.width() + borderLen;
            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              isMouseDown = true;

              //创建遮罩层，防止mouseup事件被其它元素阻止冒泡，导致mouseup事件无法被body捕获，导致拖动不能停止
              var bodyWidth = $('body').width();
              var bodyHeight = $('body').height();
              $('body').append('<div id="mask" style="opacity:0.2;top:0px;left:0px;background-color:green;position:absolute;z-index:9999;width:'+bodyWidth+'px;height:'+bodyHeight+'px;"></div>');
            }
          }
        });

        $('body').bind({
          mousemove:function(e){
            var ele = $('#myDiv');
            var rightPos = eleLeft + ele.width() + borderLen;
            $('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);

            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              ele.css('cursor','e-resize');
            }else{
              if(!isMouseDown){
                ele.css('cursor','auto');
              }
            }
            if(isMouseDown){
              ele.width((e.pageX-eleLeft-borderLen)+'px'); 
            }
          },
          mouseup:function(e){
            isMouseDown = false;
            $('#mask').remove();
          }
        });

        $('#otherDiv').mouseup(function(e){
          //e.preventDefault(); //阻止默认行为
          e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)
        });

4.完整代码和最终效果

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>div change width by drag</title>

    <script src="../jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
    
    
  </head>

  <body>
    <h1>div change width by drag</h1>
    
    <div id="pos" style="color:red"></div>
    
    
    <div id="myDiv" style="border:2px solid red;width:300px;height:50px;margin-left: 100px;margin-top: 20px"></div>

    <div id="otherDiv" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>
  </body>
  

  <script type="text/javascript">
      $(document).ready(function(){
        var eleLeft = $('#myDiv').offset().left;
        var isMouseDown = false;
        var borderLen = 4; //左右边框

        $('#myDiv').bind({
          mousedown:function(e){
            var ele = $(this);
            var rightPos = eleLeft + ele.width() + borderLen;
            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              isMouseDown = true;

              //创建遮罩层，防止mouseup事件被其它元素阻止冒泡，导致mouseup事件无法被body捕获，导致拖动不能停止
              var bodyWidth = $('body').width();
              var bodyHeight = $('body').height();
              $('body').append('<div id="mask" style="opacity:0.2;top:0px;left:0px;background-color:green;position:absolute;z-index:9999;width:'+bodyWidth+'px;height:'+bodyHeight+'px;"></div>');
            }
          }
        });

        $('body').bind({
          mousemove:function(e){
            var ele = $('#myDiv');
            var rightPos = eleLeft + ele.width() + borderLen;
            $('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);

            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              ele.css('cursor','e-resize');
            }else{
              if(!isMouseDown){
                ele.css('cursor','auto');
              }
            }
            if(isMouseDown){
              ele.width((e.pageX-eleLeft-borderLen)+'px'); 
            }
          },
          mouseup:function(e){
            isMouseDown = false;
            $('#mask').remove();
          }
        });

        $('#otherDiv').mouseup(function(e){
          //e.preventDefault(); //阻止默认行为
          e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)
        });
      });
    </script>
</html>

鼠标拖动改变DIV等网页元素的大小的实现方法

以上这篇鼠标拖动改变DIV等网页元素的大小的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

鼠标拖动改变DIV等网页元素的大小的实现方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JS定义网页表单提交（submit）的方法
Mar 20 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
详解javascript中的Error对象
Apr 25 Javascript
javascript实现简易聊天室
Jul 12 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
JS实现长图上下滚动效果
Mar 19 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 #Javascript
Js自定义多选框效果的实例代码
Jul 05 #Javascript
使用 jQuery 实现表单验证功能
Jul 05 #jQuery
详解angularJS自定义指令间的相互交互
Jul 05 #Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 #Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 #Javascript
vue一步步实现alert功能
Jul 05 #Javascript
Inception(2) yolo3(1) PostMapping(1) 内存泄露(1) Seaborn(1) Spring(9) 字符串(2) ResNet50(1) Xception(1) tensorflow(2)
You might like
PHP 实用代码收集
2010/01/22 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP输出时间差函数代码
2013/01/28 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
php并发加锁示例
2016/10/17 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
微信小程序 图片等比例缩放（图片自适应屏幕）
2016/11/16 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
js中值引用和地址引用实例分析
2019/06/21 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python GUI实例学习
2017/11/21 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python读写文件基础知识点
2019/06/10 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
英国现代、当代和设计师家具店：Furntastic
2020/07/18 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
nginx 添加http_stub_status_module模块
2022/05/25 Servers