仔细阅读这个 jQueryUI 错误票 https://bugs.jqueryui.com/ticket/7925。您将看到 jQueryUI“...不支持跨窗口拖动”。
话虽这么说,正如错误单中所建议的,您可以修改 jQueryUI 中的内部代码来完成您想要的大部分操作。我按照建议实施,只要 iFrame 中没有滚动,它就可以很好地工作。一旦 iFrame 滚动,所有的赌注都消失了,我怀疑这就是 jQueryUI 不支持此功能的原因;-)。
1).大约第 2964 行(未缩小)jquery-ui.js文件,直接在读取的行后面m[i].offset = m[i].element.offset();
添加代码:
// handle iframe scrolling
m[i].offset.top -= m[i].element.parents().find("html,body").scrollTop();
m[i].offset.left -= m[i].element.parents().find("html,body").scrollLeft();
// iframe positioning
if( this.current.options.iframeOffset )
{
m[i].offset.top += this.current.options.iframeOffset.top;
m[i].offset.left += this.current.options.iframeOffset.left;
}
2)。在对 .draggable() 的调用中,添加选项:
draggable.({
iframeFix: true,
iframeOffset: $("#yourIframeID").offset()
});
3)。确保在 iFrame 加载后从父窗口创建“可放置”:
$("#yourIframeID").load(function () {
$(this).contents().find('<yourDroppableItemSelector>').droppable({
hoverClass: "landingHover",
iframeFix: true,
drop: function (event, ui) {
$(this).css("background-color", "lightsalmon");
}
});
});
悬停类选项不是必需的,但它确实可以帮助用户在悬停时突出显示可放置区域,这样如果事情不太整齐,它仍然可用;-),整个事情是一个黑客,所以对我来说只要靠近就足够了。