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的想法）并得到了这个：

非常重要的一步。知道为什么吗？

Answer 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时，它会将框架与容器分离，因此容器会保留在原始位置。

Answer 2

不确定为什么要重新发明轮子。你使用MooTools。使用MooTools中的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 offY和offX是全局变量（坏），每个参考都是2个范围链...严重，难怪它是滞后的。当你做需要高性能的低级别的东西时，javascript需要进行微观优化，你需要真正应用自己。

另外，你的代码在IE中不起作用，你根本不使用mootools api。元素 - ＆gt; document.id('someid')，事件：element.addEvents({ event1: fn, event2: fn));等等。

mootools不只是返回一个元素。它还在IELT9中扩展它并设置元素uid，存储等。

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

Answer 3

如果您绝对需要使用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
}

它应该仅适用于某些浏览器，当然最新的浏览器。如果你成功，请告诉我。

奇怪的mootools窗口拖动行为

3 个答案: