首页
所有分类
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获取地址栏参数
Dec 22 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
js前端日历控件（悬浮、拖拽、自由变形）
Mar 02 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
详解JavaScript 的变量
Mar 08 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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
scrapy(1) DeOldify(1) SVN(1) 共享文件夹(1) 加载异常(1) localStorage(1) 横向滚动(1) Postman(1) 骨架屏(1) virtualenv(1)
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jQuery-1.9.1源码分析系列（十）事件系统之事件体系结构
2015/11/19 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
python字符串的常用操作方法小结
2016/05/21 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
python request 模块详细介绍
2020/11/10 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
瑞贝卡·明可弗包包官网：Rebecca Minkoff
2016/07/21 全球购物
全球知名旅游社区法国站点：TripAdvisor法国
2016/08/03 全球购物
澳大利亚墨尔本的在线时装店：LORETA
2018/09/14 全球购物
size?爱尔兰官方网站：英国伦敦的球鞋精品店
2019/03/31 全球购物
SHEIN台湾：购买最新流行女装服饰
2019/05/18 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js