首页
所有分类
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中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
详解jQuery事件
Jan 13 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
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
apply(1) 数组(5) mp3Play(1) bs4(1) 音频(1) 读取(1) agg(1) 数据保存(1) pandas(7) 矩阵(1)
You might like
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
一段实用的php验证码函数
2016/05/19 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python实现发送QQ邮件的封装
2017/07/14 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python plotly绘制直方图实例详解
2019/07/22 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
tensorflow多维张量计算实例
2020/02/11 Python
美国潜水装备、水肺潜水和浮潜设备商店：Leisure Pro
2018/08/08 全球购物
安德玛加拿大官网：Under Armour加拿大
2019/10/02 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python