Menu
I'm trying to create a draggable iframe in my app. When the iframe is focused, all mouse events are triggered within the inner window object.
hover)
536
One idea I have is to place a transparent element (like a div) in front of your iframe and then intercept the click and mouse move events there to make the iframe drag around.
I've done so here in this plunker.
The code, as you see below, is just enough to get across this idea and what steps are required to get the iframe to move around. It has some flaws (move your mouse quickly) but you could do some things to resolve those issues.
<!DOCTYPE html>
<html>
<head>
<style>
iframe, div {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<iframe id="iframe" src="if.html"></iframe>
<div id="div" onmousedown="startDrag(event)" onmouseup="stopDrag()" onmousemove="moveDrag(event)"></div>
</body>
<script>
var objDiv = document.getElementById("div");
var objDivCoordinates = {left: 20, top: 20};
var objIframe = document.getElementById("iframe");
var mouseX = null;
var mouseY = null;
var dragging = false;
function startDrag(e) {
mouseX = e.clientX;
mouseY = e.clientY;
dragging = true;
objIframe.contentWindow.document.writeln("Starting Drag...<br>");
}
function moveDrag(e) {
if(!dragging) return;
var changeX = mouseX - e.clientX;
var changeY = mouseY - e.clientY;
objDivCoordinates.left -= changeX;
objDivCoordinates.top -= changeY;
objDiv.style.left = objDivCoordinates.left+"px";
objDiv.style.top = objDivCoordinates.top+"px";
objIframe.style.left = objDiv.style.left;
objIframe.style.top = objDiv.style.top;
mouseX = e.clientX;
mouseY = e.clientY;
}
function stopDrag(e) {
dragging = false;
}
</script>
</html>
You could try creating a plain EventEmitter and storing it on node's global object. Since global is accessible in all node-webkit contexts, the iframe could use it to emit things that it wants the parent window to know about, and the parent can likewise use it to emit events that the iframe may want to know about.
Is this a solution that might work for you?
1
From what I see you are the most concerned about a situation when some other script cancels execution of your listener (by calling stopPropagation), but you can prevent such situation altogether.
addEventListener(type, listener [, useCapture]) allows to pass a useCapture argument, which defaults to false. If you set it to true then you are safe:
After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
