Support interactions with elements from different frames

demo/css/iframes.css

@@ -0,0 +1,22 @@
+body {
+    padding: 2em 5%;
+    font-family: sans-serif;
+}
+
+#drag-me {
+    width: 25%;
+    margin: 5vmin;
+
+    background-color: #29e;
+    color: white;
+
+    border: solid 0.4em #666;
+    border-radius: 0.75em;
+    padding: 3%;
+}
+
+iframe {
+    width: 100%;
+    height: 50vmin;
+}
+

demo/iframes-bottom.html

@@ -0,0 +1,14 @@
+<meta charset="utf-8">
+<link href="css/iframes.css" rel="stylesheet" type="text/css"/>
+
+<script src="js/iframes.js"></script>
+
+<script>
+window.interact = window.parent.interact;
+
+setInteractables();
+</script>
+
+<div id="drag-me" class="draggable">
+    <p>An element in the BOTTOM frame</p>
+</div>

demo/iframes-middle.html

@@ -0,0 +1,16 @@
+<meta charset="utf-8">
+<link href="css/iframes.css" rel="stylesheet" type="text/css"/>
+
+<script src="../interact.js"></script>
+
+<iframe src="iframes-bottom.html" style="border: solid 2px black"></iframe>
+
+<div id="drag-me" class="draggable">
+    <p>An element in the MIDDLE frame</p>
+</div>
+
+<script src="js/iframes.js"></script>
+
+<script>
+setInteractables();
+</script>

demo/iframes-top.html

@@ -0,0 +1,19 @@
+<meta charset="utf-8">
+<link href="css/iframes.css" rel="stylesheet" type="text/css"/>
+
+<iframe src="iframes-middle.html" style="border: solid 2px black"></iframe>
+
+<script src="js/iframes.js"></script>
+<script>
+document.querySelector('iframe').onload = function (event) {
+    window.interact = frames[0].interact;
+
+    setInteractables();
+};
+</script>
+
+
+<div id="drag-me" class="draggable">
+    <p>An element in the TOP frame</p>
+</div>
+

demo/js/iframes.js

@@ -0,0 +1,28 @@
+function setInteractables () {
+  'use strict';
+
+  interact('.draggable', { context: document })
+  .autoScroll(true)
+  .draggable({
+    onmove: onMove,
+  })
+  .inertia(true)
+  .restrict({
+    drag: "parent",
+    endOnly: true,
+    elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+  });
+
+  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;
+
+    target.style.webkitTransform =
+      target.style.transform =
+      'translate(' + x + 'px, ' + y + 'px)';
+
+    target.setAttribute('data-x', x);
+    target.setAttribute('data-y', y);
+  }
+}