2

我有一个可拖动的 mootools 模态窗口。
窗口的内容是一个 iFrame。
我从 iFrame 内部拖动窗口。（它拖动但在拖动过程中摇晃很多）

现场链接在这里。

问题：

  • 为什么会出现这种奇怪的拖拽行为？
  • 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刚刚对and 做了一些日志e.clientY（感谢@Nils 的想法）并得到了这个：

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

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

4

3 回答 3

1

正如有人已经提到的那样，我也看不出如何解决这个问题，至少在 iframe 之外没有额外的可拖动块元素。也许你太专注于这个特定的问题，所以你忽略了你使用的简单模式插件的可能性。这个插件实现了拖拽效果，何乐而不为呢。如果您打开 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 时，它​​将框架与容器分离，因此容器保留在原始位置。

于 2013-05-23T22:04:38.017 回答
1

不知道你为什么要重新发明轮子。您使用 MooTools。使用MooTools-more 中的Drag + Drag.Move：

http://jsfiddle.net/dimitar/bEdX8/

new Drag.Move(document.getElement('div.container'), {
    handle: document.getElement('.dragme'),
    modifiers: {
        x: 'margin-left',
        y: 'margin-top'
    }
});

似乎没有任何故障。

另外，您的代码非常滞后。

var div = parent.document.getElementById("price_info");
div.style.position = 'absolute';
div.setPosition({ x: e.clientX-offX });
div.setPosition({ y: e.clientY-offY });

这在每一步都运行？所以第一件事错了：价格信息不会改变。缓存它。立场不会改变。设置它并忘记它。

setPosition当你可以调用一次时被调用两次：

div.setPosition({ 
    y: e.clientY - offY,
    x: e.clientX - offX
});

虽然你有元素集div.style.left = nnn；直接避免函数调用。

AND offYandoffX是全局变量（坏），每个引用都是 2 个作用域链......说真的，难怪它是滞后的。当您做需要高性能的低级工作时，需要对 javascript 进行微优化，并且您需要真正应用自己。

此外，您的代码无法在 IE 中运行，并且您根本不使用 mootools api。元素 -> document.id('someid')，事件：element.addEvents({ event1: fn, event2: fn));等等等等。

mootools 不仅仅返回一个元素。它还在 IELT9 中对其进行了扩展，并设置了元素 uid、存储等。

如果您的目标是能够在具有未知 js 框架的页面上移动 iframe 的位置，并且您需要从 iframe 中绑定它，那么您正在尝试做什么是可以理解的。但是，需要适用相同的 perf 原则。

于 2013-05-24T16:08:00.213 回答
1

如果您绝对需要使用 iframe，您可以尝试另一种策略。在 iframe 中：

window.addEvent('mousedown',function(e) {
    var start={x:e.clientX,y:e.clientY};
    window.addEvent('mousemove',function(e) {
        window.parent.postMessage({dX:start.x-e.clientX, dY:start.y-e.clientY});
    });
});

window.addEvent('mouseup',function(e) {
    window.removeEvents('mousemove');
});

在主窗口上：

window.onMessage=function(event) {
// do something with event data
}

它应该只适用于某些浏览器，当然是最新的。让我知道你是否成功。

于 2013-05-26T16:04:26.730 回答