解決Jquery easyui中dialog、window、panel三個元件拖動超出父元素界限問題
阿新 • • 發佈:2018-12-23
在網上查了一些 對於此問題的改動,發現在實際中都有一些問題(比如 有時候父元素取不到,父元素的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;