jQuery EasyUI window拖動超出瀏覽器邊界問題修正
阿新 • • 發佈:2018-12-23
easyui-window擴充套件自 $.fn.panel.defaults,用 $.fn.window.defaults 重寫了 defaults。
實際使用的時候,視窗可能會被拖拽到瀏覽器視窗以外的位置,文章在初始化window對視窗的位置進行限制,當拖拽視窗位置超出瀏覽器邊緣時,視窗會停留在瀏覽器邊緣位置禁止繼續拖動,程式碼示例如下:
限制拖拽範圍的有效程式碼極為onMove: function(){...}內的那部分
<script> $('#test').window({ width: 400, height: 400, top: ($(window).height() - options.height) * 0.5, left: ($(window).width() - options.width) * 0.5, iconCls: '', onMove: function (left, top) { // popwindow拖動時觸發,限制彈出框拖動範圍 var parentObj = $(this).panel('panel').parent(); var width = $(this).panel('options').width; var height = $(this).panel('options').height; var parentWidth = $("body").width(); var parentHeight = $("body").height(); var scrollLeft = document.body.scrollLeft; var scrollTop = document.body.scrollTop; // 當彈出框尺寸大於瀏覽器大小時,彈出框自動縮小為瀏覽器當前尺寸 if (width > parentWidth) $(this).window('resize', { width: parentWidth - 1 }); if (height > parentHeight) $(this).window('resize', { height: parentHeight - 1 }); // 當彈出框被拖動到瀏覽器外時,將彈出框定位至瀏覽器邊緣 if (left < scrollLeft) { $(this).window('move', { left: scrollLeft }); } if (top < scrollTop) { $(this).window('move', { top: scrollTop }); } if (left > scrollLeft && left > parentWidth - width + scrollLeft) { $(this).window('move', { left: parentWidth - width + scrollLeft }); } if (top > scrollTop && top > parentHeight - height + scrollTop) { $(this).window('move', { top: parentHeight - height + scrollTop }); } }, }) </script>