鼠標拖動改變DIV等網頁元素的大小的最佳實踐

本文轉載自查看原文 2017-07-05 22:16 4065 html/ javascript

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery 拖動改變div大小 jQuery實現鼠標拖動改變Div高度 jquery 拖動改變div 容器大小 Js 鼠標拖拽div改變其大小 JavaScript 入門練習2：鼠標移入移出改變 div 大小鼠標拖動，改變列表寬度 Div拖動/調整大小實例 WPF 窗體中的 Canvas 限定范圍拖動鼠標滾軸改變大小 div大小如何改變設置 vue實現拖動div元素