奇怪的Mootools窗口拖动行为 [英] Strange mootools window dragging behaviour

问题描述

我有一个可拖动的Mootools模式窗口.
窗口的内容是一个iFrame.
我从iFrame内部拖动窗口. (它会拖动，但在拖动过程中会震动很多)

I have a drag-able mootools modal window.
The content of the window is a iFrame.
I drag the window from inside the iFrame. (it drags but shakes a lot during dragging)

实时链接 此处 .

Live link here.

问题:

• 为什么这种奇怪的拖曳行为?
• iFrame将其边框留在原处空白.如何避免这种情况?

非常感谢有想法/提示来寻找问题.

Thankfull for ideas/tips on were to search for problem.

我的代码:

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的想法)并得到了这个信息:

Just did some log to the e.clientX and e.clientY (Thank you @Nils for the idea) and got this:

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

非常大的步骤.知道为什么吗?

Quite big steps. Any idea why?

推荐答案

正如有人已经提到的那样，至少在iframe之外没有其他可拖动的块元素的情况下，我也看不到如何解决此问题.也许您太专注于这个特定问题，所以您忽略了使用简单模式插件的可能性.这个插件实现了可拖动的效果，为什么不使用它.如果您打开simple-modal.js文件，则第72行是该插件的html模板，如下所示:

As someone has already mentioned, I also do not see how this could be solved, at least without additional draggable block element outside of iframe. Maybe you're too focused on this specific problem so you have overlooked the possibilities of simple-modal plugin that you use. This plugin has implemented draggable effect, why not use it. If you open simple-modal.js file, in line 72 is html template for the plugin that looks like:

  "<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>"

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

Simply adjust the template to your preferences, so if you want to have a draggable footer, unlike the default header, try this:

  "<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，没有不必要的复杂性.

Apply some CSS and that's it, modal and draggable iframe without unnecessary complications.

为什么这种奇怪的拖动行为?

显示问题所在的简单测试，请将这段代码放在drag_test.php和iframe.php中:

Simple test which shows where the problem is, put this code inside drag_test.php and iframe.php:

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

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

Move the mouse around, and you'll see that one window does not knows for mouse position when the mouse is inside another window. This is because in DOM hierarchy is window object the top-level object.

iFrame将其边框留在原处空白.如何避免这种情况?

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

Border that you see is left over from simple-modal div. When you set position: absolute; to iframe it detaches the frame from container, so container remains on the original place.

这篇关于奇怪的Mootools窗口拖动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！