Interact.js - move iframe mit einem Griff

Question

Ich habe einen Iframe (blau umrandet) mit einem Griff (rot div):

Ich möchte iframe ziehen (um das Hauptdokument) ein mit roter div-Griff. Also bleibt das rote div an seinem Platz, iframe bewegt sich.

ich eine Geige erstellt haben:

https://jsfiddle.net/po70xko8/

, die nicht die Art, wie ich will es funktioniert (es bewegt sich rot div innerhalb des iframe statt). In der Geige gibt es einen Code, den ich dachte, es funktioniert, aber es funktioniert auch nicht:

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

Ist dies überhaupt möglich. Wie?

Vielen Dank!

Answer 1

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

Wenn Sie die iframe um das Dokument, das Sie das gesamte iframe nicht die event.target bewegen müssen bewegen.

Um einen IFrame zu verschieben, wenn ein Element in iframe gezogen wird, müssen Sie eine Methode im übergeordneten Dokument aufrufen, um den gesamten iFrame zu verschieben. Aufgrund einiger Einschränkungen in JFiddle konnte ich parent Methode nicht verwenden. Also habe ich onMove als global gemacht, indem ich es zum Fenster hinzufüge. Also, wenn onMove aufgerufen wird, werde ich translate der gesamte iframe von der übergeordneten.

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

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

Der Fehler im Drag ist wegen der interact.js Hoffe, dass Sie das in Ordnung bringen kann. Sie können diesen Widerstandseffekt unter Verwendung des drag Ereignisses ohne Verwendung von Bibliotheken erreichen.

Hoffen, dass dies hilft.

Answer 2

Iframe nicht für mich gearbeitet, also habe ich geringfügige Änderung an Ihrem Code Sie haben es geschafft 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); 
    }