Lou*_*uis 6 iframe jquery-ui draggable
多么满口.
基本上我有一个父母<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,但我发现当position是绝对的时,iframe会将事件放在div上.奇怪.
我决定对这个和男孩进行一次尝试,使用内部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>
内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而不是主文档.解决方法是在文档上放置一个move事件并从那里抓取鼠标位置.问题再一次是,如果鼠标位于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将位于顶部.
无论你选择哪种方式,祝你好运!
| 归档时间： |
|
| 查看次数： |
8332 次 |
| 最近记录： |