Interact.js - 私はハンドル（赤DIV）とのiframe（ブルーボーダー）を持っている

Question

ハンドル付き移動はiframe：

私が（メイン文書の周り）はiframeをドラッグしたい

使用赤いdivハンドル。だから、赤いdivはiframeの動きに定位置にとどまります。

私はフィドル作成しました：

https://jsfiddle.net/po70xko8/

私は（それが代わりのiframe内の赤のdivを移動）したいように動作しません。私はそれがうまくいくと思ったコードがありますが、それもありません：

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

これも可能ですか？どうやって？

多くの感謝！

Answer 1

ワーキングフィドル：

あなたは全体iframeないevent.target移動する必要がある文書の周りiframeを移動したい場合はhttps://jsfiddle.net/2mLutjzr/1/。

iframe内の要素をドラッグするときにiframeを移動するには、親文書内のメソッドを呼び出してiframe全体を移動する必要があります。 jsfiddleのいくつかの制限のために私はparentメソッドを使用できませんでした。だから、私はonMoveをグローバルにウィンドウに追加しました。したがって、onMoveが呼び出されると、親からのiframe全体がtranslateになります。

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

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

ドラッグでグリッチがあるためinteract.jsの あなたはそれを修正することを願っています。このドラッグエフェクトは、ライブラリを使用せずにdragイベントを使用して実現できます。

希望します。

Answer 2

インラインフレームが私のために働いていなかったので、私はあなたのコードに若干の変更を加えた、あなたは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); 
    }