IFrame 中的 jQuery 可拖动处理程序
Posted
技术标签:
【中文标题】IFrame 中的 jQuery 可拖动处理程序【英文标题】：jQuery Draggable Handler inside IFrame 【发布时间】：2011-03-26 02:54:36 【问题描述】：真是一口。
基本上，我有一个父 <div>，里面有一个 <iframe>。我需要 iframe 内的一个元素作为拖动父 div 的句柄。这甚至可能吗？
我试过了：
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle'));
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);
它的目标是正确的 DOM 元素，但它不会拖动。可能可以在 iframe 顶部覆盖隐藏的 div，但我发现当位置是绝对的时，iframe 将事件置于 div 之上。奇怪。
【问题讨论】：
使用 iFrameFix 进行拖动对我来说仍然滞后。如果对话框是可接受的解决方案，则对话框效果更好。它仍然可以拖动，但也可以关闭。 【参考方案1】：试试这个
$('#Div').draggable( iframeFix: true );
这应该可以工作
【讨论】：
【参考方案2】：我决定尝试一下，男孩，使用内部 iframe 节点作为句柄的工作量很大，但进展甚微。无论如何，这里有两个解决方案，第一个不太好用，但如果你能让它工作，它可能更可取。
main.html（抄袭自演示）
<div id="draggable" class="ui-widget-content" style="position:relative;">
<p class="ui-widget-header">I can be dragged only by this handle</p>
<iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
</div>
inner-handle.html
<html>
<head>
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
</head>
<body>
<div id="innerHandle">handle</div>
</body>
</html>
JavaScript
$(function ()
var moveEvent;
$(document).mousemove(function (e)
moveEvent = e;
);
$("#draggable").draggable();
$('iframe', '#draggable').load(function ()
$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e)
$('#draggable').draggable().data('draggable')._mouseDown(moveEvent);
return false;
);
);
);
我花了一段时间才找到“有效”的东西。这里的问题是，因为 mousedown 事件发生在 iframe 内的元素上，所以鼠标事件是相对于 iframe，而不是主文档。解决方法是在文档上设置一个移动事件并从那里获取鼠标位置。再一次，问题是如果鼠标在 iframe 内，它“不”根据父文档移动。这意味着只有当鼠标到达 iframe 的边缘进入父文档时才会发生拖动事件。
解决方法可能是手动生成事件，其中 iframe 相对于鼠标移动的计算位置。因此，当您的鼠标在 iframe 内移动时，请使用 iframe 到父文档的坐标来计算其移动。这意味着您需要使用来自 mousedown 而不是 mousemove 的事件，
$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e)
// do something with e
$('#draggable').draggable().data('draggable')._mouseDown(e);
return false;
);
第二种解决方案是您提到的方式，在 iframe 本身上有一个绝对定位的 div。我可以毫不费力地将 div 放在 iframe 之上，也就是说，
<div id="draggable" class="ui-widget-content" style="position:relative;">
<p class="ui-widget-header">I can be dragged only by this handle</p>
<iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
<div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"></div>
</div>
您的 div 位于 iframe 后面的问题可能是因为 z-index 已关闭。如果你在 iframe 之前声明你的 div 并且你没有指定 z-index，那么 iframe 将在顶部。
无论你选择哪种方式，祝你好运！
【讨论】：
哇，感谢您的辛勤工作。我想我会尝试第二种解决方案。我认为第一个太麻烦了。非常感谢！【参考方案3】：当你这样做时会发生什么（激活firebug）：
var frameContent = $('iframe',node).contents()
var handle = frameContent.find('#handle');
console.debug(frameContent, handle)
handle 是否包含元素列表？如果是这样，请仔细查看Document 对象，即frameContent - URL 是"about:blank" 吗？这只是一种预感，但如果你得到这些输出，它可能正在执行 jQuery 选择器在帧内容加载之前（即，在 #handle 元素存在之前）。
在这种情况下，您可以将事件添加到 IFRAME 文档，并通过 window.parent 与父框架通信。
【讨论】：
现在无法测试，因此将尽快尝试，但我正在更改 iframe 中 window.onload 上的选项，因此我认为它已准备就绪。当我记录找到的内容时，它是正确的 DOM 元素。也许这是不可能的。以上是关于IFrame 中的 jQuery 可拖动处理程序的主要内容，如果未能解决你的问题，请参考以下文章