Interact.js -使用句柄移动iframe

Question

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

​

​

我想使用一个红色的div手柄拖动iframe (围绕主文档)。因此，红色的div保持不变，iframe移动。

我已经创建了一个小提琴：

https://jsfiddle.net/po70xko8/

这并不是我想要的方式(它在iframe中移动red div )。在小提琴中有一个代码，我认为它会工作，但它也不是：

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

这有没有可能。多么?

非常感谢！

Answer 1

工作小提琴：https://jsfiddle.net/2mLutjzr/1/

如果要在文档中移动iframe，则需要移动整个iframe，而不是event.target。

要在iframe内拖动元素时移动iframe，您需要在父文档中调用一个方法来移动整个iframe。由于jsfiddle中的一些限制，我不能使用parent方法。因此，我将onMove添加到window中，使其成为全局的。因此，当onMove被调用时，我将从父级translate整个iframe。

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

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

拖拽中的小故障是因为interact.js希望你能修复它。您可以在不使用任何库的情况下使用事件来实现此拖动效果

希望这能有所帮助。

Answer 2

Iframe对我不起作用，所以我对你的代码做了一些改动，你可以找到它的here

var frameHtml = '<div id="wrapper"><div id="header" style="height:50px;background-color:red">Drag me</div><div id="content" style="background-color:green">Teh content</div></div>';
    var iframe = document.createElement("div");
    iframe.innerHTML = frameHtml;        
    iframe.id = "widgetWrapper";
    iframe.setAttribute("style", "z-index: 1000000;border:5px solid blue;");

    var p = document.getElementsByTagName("body")[0];
    p.appendChild(iframe);        

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

    function onMove (event) {
        var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        if ('webkitTransform' in target.style || 'transform' in target.style) {
            target.style.webkitTransform =
                target.style.transform =
                'translate(' + x + 'px, ' + y + 'px)';
        }
        else {
            target.style.left = x + 'px';
            target.style.top  = y + 'px';
        }

        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
    }