easyui window拖动越界2中解决方案

最新推荐文章于 2023-02-22 11:49:40 发布

小勇Oo

最新推荐文章于 2023-02-22 11:49:40 发布

阅读量1.7k

点赞数

分类专栏： js篇

本文链接：https://blog.csdn.net/qq383264679/article/details/43970579

版权

本文介绍了在使用easyui框架时，遇到窗口组件(window)拖动超出屏幕边界的问题，提供了两种解决方案。一种是通过引用easyui.min.js文件并正确配置；另一种是针对使用easyloader.js的情况，指出了需要修改的三个关键位置。

摘要由CSDN通过智能技术生成

1.使用easyui.min.js文件调用easyui控件，只需要引用如下文件即可：

	/*----------------------------------------------------------------
            // 文件名：window-dragbug-fix.js
            // 文件功能描述：修复easyui中panel,dialog,window组件拖拽越界问题
            //
            // 
            // 创建标识：dudw 20141226
            //
            // 修改标识：
            // 修改描述：
            //
            // 修改标识：
            // 修改描述：
			//----------------------------------------------------------------*/


	var ie = (function() {   
	    var undef, v = 3, div = document.createElement('div'), all = div   
	            .getElementsByTagName('i');   
	    while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0]);   
	    return v > 4 ? v : undef;   
	}());   
	/**
	 * add by cgh  
	 * 针对panel window dialog三个组件调整大小时会超出父级元素的修正  
	 * 如果父级元素的overflow属性为hidden，则修复上下左右个方向  
	 * 如果父级元素的overflow属性为非hidden，则只修复上左两个方向  
	 * @param width  
	 * @param height  
	 * @returns  
	 */  
	var easyuiPanelOnResize = function(width, height) {   
	    if (!$.data(this, 'window') && !$.data(this, 'dialog'))   
	        return;   
	  
	    if (ie === 8) {   
	        var data = $.data(this, "window") || $.data(this, "dialog");   
	        if (data.pmask) {   
	            var masks = data.window.nextAll('.window-proxy-mask');   
	            if (masks.length > 1) {   
	                $(masks[1]).remove();   
	                masks[1] = null;   
	            }   
	        }   
	    }   
	    if ($(this).panel('options').maximized == true) {   
	        $(this).panel('options').fit = false;   
	    }   
	    $(this).panel('options').reSizing = true;   
	    if (!$(this).panel('options').reSizeNum) {   
	        $(this).panel('options').reSizeNum = 1;   
	    } else {   
	        $(this).panel('options').reSizeNum++;   
	    }   
	    var parentObj = $(this).panel('panel').parent();   
	    var left = $(this).panel('panel').position().left;   
	    var top = $(this).panel('panel').position().top;   
	  
	    if ($(this).panel('panel').offset().left < 0) {   
	        $(this).panel('move', {   
	                    left : 0   
	                });   
	    }   
	    if ($(this).panel('panel').offset().top < 0) {   
	        $(this).panel('move', {   
	                    top : 0   
	                });   
	    }   
	  
	    if (left < 0) {   
	        $(this).panel('move', {   
	                    left : 0   
	                }).panel('resize', {   
	                    width : width + left   
	                });   
	    }   
	    if (top < 0) {   
	        $(this).panel('move', {   
	                    top : 0   
	                }).panel('resize', {   
	                    height : height + top   
	                });   
	    }   
	    if (parentObj.css("overflow") == "hidden") {   
	        var inline = $.data(this, "window").options.inline;   
	        if (inline == false) {   
	            parentObj = $(window);   
	        }   
	  
	        if ((width + left > parentObj.width())   
	                && $(this).panel('options').reSizeNum > 1) {   
	            $(this).panel('resize', {   
	                        width : parentObj.width() - left   
	                    });   
	        }   
	  
	        if ((height + top > parentObj.height())   
	                && $(this).panel('options').reSizeNum > 1) {   
	            $(this).panel('resize', {   
	                        height : parentObj.height() - top   
	                    });   
	        }   
	    }   
	    $(this).panel('options').reSizing = false;   
	};   
	/**
	 * add by cgh  
	 * 针对panel window dialog三个组件拖动时会超出父级元素的修正  
	 * 如果父级元素的overflow属性为hidden，则修复上下左右个方向  
	 * 如果父级元素的overflow属性为非hidden，则只修复上左两个方向  
	 * @param left