1. 程式人生 > >jQuery EasyUI window拖動超出瀏覽器邊界問題修正

jQuery EasyUI window拖動超出瀏覽器邊界問題修正

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>