1. 程式人生 > >解決Jquery easyui中dialog、window、panel三個元件拖動超出父元素界限問題

解決Jquery easyui中dialog、window、panel三個元件拖動超出父元素界限問題

在網上查了一些 對於此問題的改動,發現在實際中都有一些問題(比如 有時候父元素取不到,父元素的width和height取不到),於是在此基礎上做了修改,親測可用。

/**
 * 針對panel window dialog三個元件拖動時會超出父級元素的修正
 * @param left
 * @param top
 * @returns
 */


var easyuiPanelOnMove = function(left, top) {
	if (left < 0) {
		$(this).window('move', {
			left : 1
		});
	}
	if (top < 0) {
		$(this).window('move', {
			top : 1
		});
	}
	var width = parseInt($(this).parent().css('width'));
	var height = parseInt($(this).parent().css('height'));
	var parentWidth = $(window).width();
	var parentHeight = $(window).height();


	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;



本來以為已經改好了,但是最後在測試的時候發現$.Messager.alert 這個控制元件居然彈不出來了,IE下也沒有任何報錯, 最後經過長時間的苦逼,終於找到解決辦法,就是自己設定合適的控制元件的寬和高 還有父面板的寬和高 
PS:是下面這段JS裡面的寬和高 不是介面上的。還有儘量不要修改Panel的移動事件,因為很多其他控制元件都是從他衍生,改了的話很容易導致整個框架癱瘓


var easyuiWindowOnMove = function(left, top) {
	if (left < 0) {
		$(this).window('move', {
			"left" : 1
		});
	}
	if (top < 0) {
		$(this).window('move', {
			"top" : 1
		});
	}
	var width = 500;
	var height = 400;
	var parentWidth = 1055;
	var parentHeight = 1000;



	if (left > parentWidth - width) {
		$(this).window('move', {
			"left" : parentWidth - width
		});
	}
	if (top > parentHeight - height) {
		$(this).window('move', {
			"top" : parentHeight - height
		});
	}


}
$.fn.window.defaults.onMove = easyuiWindowOnMove;

var easyuiDialogOnMove = function(left, top) {
	if (left < 0) {
		$(this).dialog('move', {
			"left" : 1
		});
	}
	if (top < 0) {
		$(this).dialog('move', {
			"top" : 1
		});
	}
	var width = $(this).dialog('options').width;
	var height = $(this).dialog('options').height;
	var parentWidth = 1055;
	var parentHeight = 1000;



	if (left > parentWidth - width) {
		$(this).dialog('move', {
			"left" : parentWidth - width
		});
	}
	if (top > parentHeight - height) {
		$(this).dialog('move', {
			"top" : parentHeight - height
		});
	}


}
$.fn.dialog.defaults.onMove = easyuiDialogOnMove;
這個是最終版,可用無錯。