javascript - 奇怪的 mootools 窗口拖动行为

Question

我有一个可拖动的 mootools 模式窗口。
窗口的内容是一个 iFrame。
我从 iFrame 内部拖动窗口。 (拖拽的时候但是拖拽的时候晃动很大)

实时链接 here 。

问题:

• 为什么会有这种奇怪的拖动行为？
• iFrame 将其边框留空，保留在原始位置。如何避免这种情况？

感谢您提供有关搜索问题的想法/提示。

---

我的代码:

window.addEvent('domready',function() {
document.getElementById('iframe2_footer').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);         
});

function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
var div = parent.document.getElementById("price_info");
offY= e.clientY-parseInt(div.offsetTop);
offX= e.clientX-parseInt(div.offsetLeft);
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = parent.document.getElementById("price_info");
div.style.position = 'absolute';
div.setPosition({ x: e.clientX-offX });
div.setPosition({ y: e.clientY-offY });
}

编辑: 刚刚对 e.clientX 和 e.clientY 做了一些日志(谢谢@Nils 的想法)并得到了这个:

...
450 -168
340 -218
460 -173
347 -221
468 -176
355 -224
478 -179
364 -226
483 -182
374 -229
...

相当大的步骤。知道为什么吗？

Answer 1

正如有人已经提到的，我也不知道如何解决这个问题，至少在 iframe 之外没有额外的可拖动 block 元素。也许您过于关注这个特定问题，因此忽略了您使用的简单模式插件的可能性。这个插件已经实现了可拖动的效果，何不用呢。如果您打开 simple-modal.js 文件，第 72 行是插件的 html 模板，如下所示:

  "<div class=\"simple-modal-header\"> \
    <h1>{_TITLE_}</h1> \
  </div> \
  <div class=\"simple-modal-body\"> \
    <div class=\"contents\">{_CONTENTS_}</div> \
  </div> \
  <div class=\"simple-modal-footer\"></div>"

只需根据您的喜好调整模板，因此，如果您想要一个可拖动的页脚(与默认页眉不同)，请尝试以下操作:

  "<div class=\"simple-modal-body\"> \
    <div class=\"contents\">{_CONTENTS_}</div> \
  </div> \
  <div class=\"simple-modal-footer\"></div> \
  <div class=\"simple-modal-header\"><h1>{_TITLE_}</h1></div>"

应用一些 CSS，就是这样，模态和可拖动的 iframe，没有不必要的复杂性。

编辑:

为什么会有这种奇怪的拖动行为？

简单的测试显示问题出在哪里，将此代码放入drag_test.php和iframe.php中:

// script
window.addEventListener("mousemove", function(e) {
    document.getElementById('mousepos').innerHTML = e.clientX+' - '+e.clientY;
});
// body
<p id="mousepos"></p>

移动鼠标，您会发现当鼠标位于另一个窗口内时，一个窗口不知道鼠标位置。这是因为在 DOM 层次结构中，窗口对象是顶级对象。

iFrame 将其边框留空，保留在原始位置。如何避免这种情况？

您看到的边框是简单模式 div 留下的。当您将 position:absolute; 设置为 iframe 时，它​​会将框架与容器分离，因此容器保留在原始位置。