我正在尝试在我的应用程序中创建一个可拖动的iframe.当iframe被聚焦时,所有的鼠标事件在内部窗口对象内被触发.
>我不能听iframe内的这些事件并自动触发它们,因为它可以被iframe内容js阻止
>我不能在iframe上面创建一个不可见的层,它将捕获所有的事件并将它们转移到iframe,因为batin事件不能被脚本触发(如css hover)
>我可以在Node层中捕获这些事件,而不使用webkit DOM吗？
解决方法
我有一个想法是将一个透明元素(如div)放在你的iframe前面,然后拦截点击和鼠标移动事件,使iframe拖动.
我在这个plunker这样做了.
如下所示,代码恰好足以反映这一想法,并且需要什么步骤才能使iframe移动.它有一些缺陷(快速移动你的鼠标),但你可以做一些事情来解决这些问题.
<!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>
