我决定尝试一下,使用内部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) {
$('#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将位于顶部。
无论您选择哪种方式,祝您好运!