jQuery EasyUI window拖动超出浏览器边界问题修正_jquery easuui window不能拖拽-优快云博客

本文链接：https://blog.youkuaiyun.com/liu942626/article/details/52048051

本文探讨了jQuery EasyUI中window组件在拖动时可能超出浏览器边界的问题。通过重写$.fn.window.defaults，并在onMove事件中设置限制，确保窗口在接近浏览器边缘时停止拖动，以保持在可视区域内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>