首页
所有分类
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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
jquery 插件学习（三）
Aug 06 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
微信小程序request请求封装，验签代码实例
Dec 04 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 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
共享文件夹(1) 骨架屏(1) NginxConfig(1) 表约束(2) ESXI(1) Master(1) 主从复制(1) Slave(1) SVN(1) caddy(1)
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP中header用法小结
2016/05/23 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python opencv3实现人脸识别（windows）
2018/05/25 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python读取xml文件方法解析
2020/08/04 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
开业庆典邀请函
2014/01/08 职场文书
挂靠协议书范本
2014/04/22 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
golang中的struct操作
2021/11/11 Golang