首页
所有分类
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 中令人困惑的变量赋值
Aug 13 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
jquery仿微信聊天界面
May 06 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
vue下跨域设置的相关介绍
Aug 26 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
ES6中Array.includes()函数的用法
Sep 20 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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
Flask Web(1) MyBatis(5) exec(1) Android Studio(4) Dijkstra(1) seata(1) nacos(1) 三角函数(1) 迪杰斯特拉(1) cv2(1)
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
告诉大家什么是JSON
2008/06/10 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
Javascript基础教程之数据类型 （布尔型 Boolean）
2015/01/18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python2与Python3的区别实例分析
2019/04/11 Python
python实现日志按天分割
2019/07/22 Python
美国照明、家居装饰和家具购物网站：Bellacor
2017/09/20 全球购物
马来西亚网上花店：FlowerAdvisor马来西亚
2020/01/03 全球购物
介绍一下gcc特性
2012/01/20 面试题
历史教育专业个人求职信
2013/12/13 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
小学生开学感言
2014/02/28 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
园林系毕业生求职信
2014/06/23 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
创业开店，这样方式更合理
2019/08/26 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
2021/04/13 Javascript
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js