我在iframe外面有一个可拖动的东西,里面有一个可放置的目标。在这里,我将iframe显示为包含由其src属性加载的HTML片段。
<div id="draggables">
<img src="drag-me.gif">
</div>
<iframe src="iframe-src.html" id="iframe">
<!-- HTML gubbins -->
<div id="droppable"> </div>
<!-- More HTML gubbins -->
</iframe>
我使用一些jQuery(UI draggable / droppable)来做东西:
$("#iframe").load(function() {
var $this = $(this);
var contents = $this.contents();
contents.find('#droppable').droppable({
drop: function (event, ui) { alert('dropped'); }
});
$('#draggables img').draggable();
});
可拖动成为可拖动的,并且可放置成功的投放目标。问题是丢弃区域的着陆区域不是它在屏幕上显示的位置。也就是说,当draggable被放置在放置目标上方某处而不是目标本身上时,会触发警报。
我做过的一些测试表明目标在屏幕上的位置与jQuery认为的位置之间的差异与页面上iframe的垂直位置有关,但我找不到直接关联。有谁知道这个问题是否已被任何人调查过,并且已经解决了吗?
如果不这样做,任何人都可以提出一种方法,我可以在不使用iframe的情况下将外部HTML文件加载到我的页面中,而且两页的结构和样式不会相互干扰吗?我正在考虑直接加载内页并使用javascript来绘制页面控件。
TIA Altreus
答案 0 :(得分:0)
您正尝试从子iframe中访问父元素。我没有亲自测试它,但尝试为您的jquery选择器设置上下文。否则,它只会在当前的iFrame内部显示。
$('#draggables img', parent).draggable();
答案 1 :(得分:0)
很久以前就被问到了,但是挖掘了我发现了一个GIST,人们通过覆盖$.ui.ddmanager.prepareOffsets
的默认行为解决了这个问题。
您可以在此处找到工作代码: https://gist.github.com/gujiman/581a3cee1dbf4beafccb