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

我有一个带手柄（红色div）的iframe（蓝色边框）：

我想使用红色div句柄拖动iframe（围绕主文档）。因此，红色div保持在原位，iframe移动

我创造了一把小提琴：

这不是我想要的方式（它在iframe中移动红色div）。在小提琴中有一个代码，我认为它可以工作，但它也不能：

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

这可能吗。怎么做

非常感谢

工作小提琴：

如果要在文档周围移动

iframe

，则需要移动整个

iframe

，而不是

事件目标

要在拖动iframe中的元素时移动iframe，需要调用父文档中的方法来移动整个iframe。由于JSFIDLE中的一些限制，我无法使用该方法。所以，我将
onMove
添加到窗口中，使其成为全局的。因此，当调用
onMove
时，我将
翻译来自父级的整个iframe

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

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

拖动过程中出现的问题是由于interact.js
希望你能解决这个问题。您可以在不使用任何库的情况下使用事件来实现此拖动效果

希望这有帮助。
如果框架对我不起作用，那么我对您的代码做了一些细微的修改，您可以找到它

var frameHtml='Drag meTeh content'；
var iframe=document.createElement（“div”）；
iframe.innerHTML=frameHtml；
iframe.id=“widgetWrapper”；
setAttribute（“样式”，“z索引：1000000；边框：5px纯蓝色；”）；
var p=document.getElementsByTagName（“正文”）[0]；
p、 附加子对象（iframe）；
交互（iframe）
.allowFrom（标题）
.拖拉({
onmove:onmove
});
移动功能（事件）{
var target=event.target，
x=（parseFloat（target.getAttribute（'data-x'））| | 0）+event.dx，
y=（parseFloat（target.getAttribute（'data-y'））| | 0）+event.dy；
if（'webkitttransform'在target.style中| |'transform'在target.style中）{
target.style.webkitTransform=
target.style.transform=
'翻译（'+x+'px'，+y+'px）'；
}
否则{
target.style.left=x+'px'；
target.style.top=y+'px'；
}
target.setAttribute（'data-x'，x）；
target.setAttribute（'data-y'，y）；
}
嘿，这不是一个微小的变化，这是一个重大的变化（div与iframe）。iframe是必须的（现在）。谢谢你的回答。但我仍然无法修复glithing/jumping。@rrejc这就是interact.js的问题，请尝试使用本机拖动事件。这应该行得通。我会在空闲时间试着用它做一个例子。我也想到了（本地拖动事件）；我认为使用interact.js比重新发明轮子更容易，但它并不像我想象的那么简单。句柄必须是iframe内容的一部分吗？如果不是，则可以将帧放入父div中，并使句柄成为该父div的一部分。
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);
    }