拖拽边缘改变窗口（物体）大小

Posted Booo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽边缘改变窗口（物体）大小相关的知识，希望对你有一定的参考价值。

 

<body> 
　　<div id="div1"></div>
</body>

<style>
　　#div1 {width: 100px; height: 100px; background: red; position: absolute; left: 500px; top: 200px;}
</style>

<script>
　　window.onload = function() {
    
    var oDiv = document.getElementById(\'div1\');
    
    oDiv.onmousedown = function(ev) {
        
        var ev = ev || event;
        
        var disW = this.offsetWidth;
        var disX = ev.clientX;
        var disL = this.offsetLeft;
        
        var b = \'\';
        
        if ( disX > disL + disW - 10 ) {
            //alert( \'right\' );
            b = \'right\';
        }
        if ( disX < disL + 10 ) {
            //alert( \'left\' );
            b = \'left\';
        }
        
        document.onmousemove = function(ev) {
            
            var ev = ev || event;
            
            switch( b ) {
                
                case \'left\':
                    oDiv.style.width = disW - ( ev.clientX - disX ) + \'px\';
                    oDiv.style.left = disL + ( ev.clientX - disX ) + \'px\';
                    break;
                    
                case \'right\':
                    oDiv.style.width = disW + ( ev.clientX - disX ) + \'px\';
                    break;
                
            }
            
        }
        
        document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null;
        }
        
        return false;
        
    }
    
　　}
</script>

 



以上是关于拖拽边缘改变窗口（物体）大小的主要内容，如果未能解决你的问题，请参考以下文章
 

 VC++中, 在鼠标已经按住窗口边缘, 要拖拽调整窗口大小的时候, 会发送啥消息?


 解决Duilib创建的win32窗口拖到屏幕上边缘自动最大化


 窗口拖拽（改变大小/最小化/最大化/还原/关闭）


 Qt学习四 - 布局管理器


 根据数字大小改变颜色js


 Winform拖拽改变无边框窗体大小