yar*_*den 10 javascript iframe node.js node-webkit
我正在尝试在我的应用中创建一个可拖动的iframe.当iframe被聚焦时,所有鼠标事件都在内部窗口对象中触发.
hover)我的一个想法是在iframe前面放置一个透明元素（如div ） ，然后拦截那里的单击和鼠标移动事件以使 iframe 拖动。
我已经在这个笨蛋中这样做了。
正如您在下面看到的，代码足以理解这个想法以及让 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>
| 归档时间： |
|
| 查看次数： |
704 次 |
| 最近记录： |