IFrame中的jQuery Draggable Handler [英] jQuery Draggable Handler inside IFrame
问题描述
多么满口。
基本上我有一个父母< div> 并且里面有一个< IFRAME> 。我需要iframe中的一个元素作为拖动父div的句柄。这有可能吗？
Basically I have a parent <div> and inside that an <iframe>. I need an element inside the iframe to be the handle to drag the parent div. Is this even possible?
我试过：
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle'));
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);
它针对的是正确的DOM元素，但它不会拖动。有可能在iframe上叠加一个隐藏的div，但是我发现当position是绝对的时，iframe会将事件放在div上。奇怪。
It is targeting the right DOM element but it just won't drag. It might be possible to overlay a hidden div ontop of the iframe but I have found the iframe takes the event over the div when position is absolute. Strange.
推荐答案
我决定对这个和男孩进行一次尝试，这是很多工作，使用内部iframe几乎没有进展节点作为句柄。无论如何，这里有两个解决方案，第一个解决方案不能很好地工作，但是如果你可以让它工作，那可能更合适。
I decided to take a stab at this and boy, it's a lot of work with little progress using an internal iframe node as a handle. Anyway, here are two solutions, the first one doesn't work really well, but if you can get it to work, it may be more desirable.
main.html （从演示中抄袭）
main.html (plagiarized from the demo)
<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
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
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而不是主文档。解决方法是在文档上放置一个move事件并从那里抓取鼠标位置。问题再一次是，如果鼠标位于iframe内部，则根据父文档不移动。这意味着只有当鼠标到达父文档中iframe的边缘时才会发生拖动事件。
It took me a while to find something that "worked." The problem here was that since the mousedown event occurred on an element inside the iframe, the mouse event is relative to the iframe, not the main document. The workaround is to have a move event on the document and grab the mouse position from there. The problem, once again, is that if the mouse is inside of the iframe, it is "not" moving according to the parent document. This means that the drag event only happens when the mouse reaches the edge of the iframe into the parent document.
此解决方法可能是手动生成带有计算的事件iframe相对于鼠标移动的位置。因此，当您的鼠标在iframe中移动时，使用iframe的坐标计算其移动到父文档。这意味着你需要使用mousedown中的事件而不是mousemove，
A workaround for this might be to manually generate events with the calculated position of the iframe relative to its mouse movement. So when your mouse moves within the iframe, calculate its movement using the coordinate of the iframe to the parent document. This means that you need to use the event from the mousedown and not the 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之上，也就是说，
The second solution is the way you have mentioned, have an absolute positioned div over the iframe itself. I have no trouble in getting the div to be on top of the iframe, that is,
<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将位于顶部。
The problem with your div being behind the iframe might be because the z-index is off. If you declare your div before the iframe and you didn't specify the z-index, then the iframe will be on top.
无论你选择哪种方式，祝你好运！
Whichever way you choose, good luck!
这篇关于IFrame中的jQuery Draggable Handler的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
