javascript - Interact.js - 使用句柄移动 iframe

Question

我有一个带有句柄(红色 div)的 iframe(蓝色边框):

我想使用红色 div handle 拖动 iframe(围绕主文档)。因此，红色 div 保持原位，iframe 移动。

我创建了一个 fiddle :

https://jsfiddle.net/po70xko8/

这并不像我想要的那样工作(而是在 iframe 内移动红色 div)。在 fiddle 中有一个代码，我认为它会起作用，但它也不起作用:

    interact(iframe)
    .allowFrom(header)
    .draggable({
        onmove: onMove
    });

这有可能吗？怎么办？

非常感谢!

Answer 1

工作 fiddle :https://jsfiddle.net/2mLutjzr/1/

如果您想围绕文档移动 iframe，您需要移动整个 iframe 而不是 event.target。

要移动 iframe，当拖动 iframe 内的元素时，您需要调用父文档中的方法来移动整个 iframe。由于 jsfiddle 中的某些限制，我无法使用 parent方法。所以，我通过将 onMove 添加到 window.因此，当调用 onMove 时，我将翻译 父级的整个 iframe。

window.onmove = function(event){
  //handled in the parent
}

interact(header)
.allowFrom(header)
.draggable({
     onmove: window.onMove //call the global callback
});

拖动中的故障是因为 interact.js 希望你能解决这个问题。您可以使用 drag 实现这种拖动效果不使用任何库的事件

希望这对您有所帮助。