如何实现鼠标拖动改变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等网页元素的大小-创新互联
URL标题:http://pwwzsj.com/article/gpich.html

其他资讯