IE中的窗口拖动问题
Posted
技术标签:
【中文标题】IE中的窗口拖动问题【英文标题】：Window dragging issue in IE 【发布时间】：2012-08-26 00:36:30 【问题描述】：ExtJS 4
我希望将我的 Ext.Window 拖到浏览器边界之外。所以我把浏览器的滚动条去掉了
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
在 Firefox 中它工作正常。但是在 IE 中，每当我将窗口拖到外面时，它又会在浏览器窗口中捕捉到。
I want this (case 1)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
| |
| |
| |
| |
| |
| |
| --window----
| | A | B |
| -----+------
| |
| |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
A = 可见部分
B = 裁剪部分
But this is happening in IE8 (case 2)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
| |
| |
| |
| |
| |
| |
| --window--|
| | ||
| ----------|
| |
| |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
请告诉我为什么会这样。如何纠正这个问题？
已编辑：
这是我正在使用的完整代码。 它在 firefox 中表现为 case 1（这是必需的），但在 IE 中表现为 case 2。
<html>
<head>
<title>Page5 (Window)</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function()
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
Ext.create('Ext.Window',
title: 'Title',
html: 'html',
height: 300,
width: 300
//constrainHeader: true
).show();
);
</script>
</head>
<body background="Water lilies.jpg" ></body>
</html>
【问题讨论】：
这个例子对你有用吗？如果是这样 - 确保组件（和 css）的所有属性都相同。 docs.sencha.com/ext-js/4-0/extjs-build/examples/window/… 这在 Firefox 中运行良好（如案例 1）。我在 IE 中复制粘贴了相同的链接，然后表现得像这样（如案例 2）。 这很奇怪。我刚刚在 ie7、8 和 9 中对此进行了测试，它的工作原理与在 Fx 中相同... 我已经添加了代码（没什么特别的）。您可以尝试粘贴到系统中并检查是否能够将其拖到浏览器边界之外。或者，如果您有什么特别之处，也可以分享给我。 我已经在几台 Windows 机器上对此进行了测试，它们都具有您的问题所指定的相同行为（案例 2）。这对你来说不是本地的，不要因为别人说它对他们有用而气馁。 【参考方案1】：如果您的窗口位于某个 ExtJS 容器（如 Viewport 或 Panel）内，它就可以工作。请参阅下面的代码：
Ext.onReady(function()
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.style.overflowX = 'hidden';
document.body.style.overflowY = 'hidden';
// document.body.style.position = 'relative';
document.body.scroll = "no"; // ie only
Ext.create('Ext.Viewport',
title : 'Test Panel',
width : 1000,
height : 700,
items : [
id : 'mywin',
title : 'Title',
html : 'html',
height : 300,
width : 300
]
);
Ext.getCmp('mywin').show();
);
您也可以将它包含在面板中...如果面板小于浏览器的视图，则窗口会在面板之外滚动，并且在到达浏览器边界时会按照您的意愿行事。
查看this。我无法更改身体的位置类型并使其正常工作。或许你可以试试看。
【讨论】：
以上是关于IE中的窗口拖动问题的主要内容，如果未能解决你的问题，请参考以下文章
在窗口外拖动时如何检测Firefox中的dragleave事件