Interact.js - шаг IFrame с ручкой

Question

У меня есть IFRAME (синяя граница) с ручкой (красный): DIV

Я хочу, чтобы перетащить IFRAME (вокруг основного документа), используя красный div ручка. Итак, красный div остается на месте, iframe движется.

Я создал скрипку:

https://jsfiddle.net/po70xko8/

, который не работает так, как я хочу (он перемещает красный DIV внутри фрейма, а). В скрипкой есть код, который я думал, что это будет работать, но он также не делает:

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

Это даже возможно. Как?

Большое спасибо!

Answer 1

Рабочая Fiddle: https://jsfiddle.net/2mLutjzr/1/

Если вы хотите переместить iframe вокруг документа, вам нужно переместить весь iframe не event.target.

Чтобы переместить iframe при перетаскивании элемента внутри iframe, вам необходимо вызвать метод в родительском документе, чтобы переместить весь iframe. Из-за некоторого ограничения в jsfiddle я не мог использовать метод parent. Итак, я сделал onMove глобальным, добавив его в окно. Итак, когда вызывается 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 надеюсь, что вы можете исправить это. Вы можете достичь этого эффекта сопротивления, используя drag событие без использования каких-либо библиотек

Надеюсь, это поможет.

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); 
    }