我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线：400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

如何实现鼠标拖动改变DIV等网页元素的大小-创新互联

这篇文章主要介绍如何实现鼠标拖动改变DIV等网页元素的大小，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

站在用户的角度思考问题，与客户深入沟通，找到阳信网站设计与阳信网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、做网站、企业官网、英文网站、手机端网站、网站推广、空间域名、雅安服务器托管、企业邮箱。业务覆盖阳信地区。

1.初次实现

1.1 html代码


  
    
    div change width by drag
    
  

  
    
div change width by drag

    
         
  

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上放开鼠标后无法停止下来！

  　　　　　　　　　$('#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('');
            }
          }
        });

        $('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.完整代码和最终效果


  
    

    div change width by drag

    
    
    
  

  
    
div change width by drag

    
    
    
    
    

    
  
  

  
      $(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('');
            }
          }
        });

        $('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事件)
        });
      });
    

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

以上是“如何实现鼠标拖动改变DIV等网页元素的大小”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网站标题：如何实现鼠标拖动改变DIV等网页元素的大小-创新互联
本文网址：http://shouzuofang.com/article/gpich.html

其他资讯