Interact.js - move iframe with a handle

Question

I have a iframe (blue border) with a handle (red div):

I want to drag iframe (around the main document) using a red div handle. So, the red div stays in place, iframe moves.

I have created a fiddle:

https://jsfiddle.net/po70xko8/

which doesn't works the way i want (it moves red div inside the iframe instead). In the fiddle there's a code which i thought it will work, but it also doesn't:

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

Is this even possible. How?

Many thanks!

Answer 1

Working Fiddle: https://jsfiddle.net/2mLutjzr/1/

If you want to move the iframe around the document you need to move the entire iframe not the event.target.

To move a iframe when to drag an element inside iframe, you need to call a method in the parent document to move the entire iframe. Due to some restriction in jsfiddle I couldn't use parent method. So, I've made onMove as global by adding it to window. So, when onMove is called I'll translate the entire iframe from the parent.

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

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

The glitch in the drag is because of the interact.js Hope you can fix that. You can achieve this drag effect using drag event without using any libraries

Hope this helps.

Answer 2

Iframe didn't worked for me, so I've made slight change to your code you can find it 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);
    }