開發專案遇到了panel,dialog以及window元件在被拖動時，會超出瀏覽器邊界而無法拖回的情況，不過仔細分析一下程式碼，對於右下兩側的重定位還是存在問題的，後來在網上找了一些，後來發現問題所在，並找到問題的解決方法，如下：

一、分析：

大家試一下就可以發現，當右側和下側超過瀏覽器邊界時並不會自動回到邊界點，主要是以下程式碼存在問題：

var width = $(this).panel('options').width;
var right = left + width;
var browserWidth = $(document).width();
if (right > browserWidth) {
	$(this).window('move', {
		left: browserWidth - width
	});
}
 

當視窗被拖出瀏覽器有邊界時，$(document).width();會增大，增大的部分就是視窗超過瀏覽器視窗的部分，所以right > browserWidth條件永遠無法滿足。

如果我們在思考得多一點，其實對於panel,dialog,window三個元件，我們往往要求的並不是它不能超出瀏覽器界限，而是要求它不能超出父元素界限，而且當父元素的overflow不是hidden的時候，應該允許元件超出父元素右下側，個人覺得這樣更合理。

二，解決方式

   將如下程式碼將js程式碼儲存為windowAdapter.js檔案，在jquery.easyui.min.js之後引入你儲存的js檔案即可。

/**
 * add by sht from Internet
 * 針對panel window dialog三個元件拖動時會超出父級元素的修正
 * 如果父級元素的overflow屬性為hidden，則修復上下左右個方向
 * 如果父級元素的overflow屬性為非hidden，則只修復上左兩個方向
 * @param left
 * @param top
 * @returns
 */
var easyuiPanelOnMove = function(left, top) {
	var parentObj = $(this).panel('panel').parent();
	if (left < 0) {
		$(this).window('move', {
			left : 1
		});
	}
	if (top < 0) {
		$(this).window('move', {
			top : 1
		});
	}
	var width = $(this).panel('options').width;
	var height = $(this).panel('options').height;
	var right = left + width;
	var buttom = top + height;
	var parentWidth = parentObj.width();
	var parentHeight = parentObj.height();
	if(parentObj.css("overflow")=="hidden"){
		if(left > parentWidth-width){
			$(this).window('move', {
				"left":parentWidth-width
			});
		}
		if(top > parentHeight-height){
			$(this).window('move', {
				"top":parentHeight-height
			});
		}
	}
};
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;