jquery 对话框：拖动带有 iframe 的对话框答案

【问题标题】：jquery dialog: dragging dialog with iframe insidejquery 对话框：拖动带有 iframe 的对话框
【发布时间】：2010-08-02 14:47:21
【问题描述】：

当拖动带有 iframe 的 jquery 对话框时，如果鼠标在拖动时越过框架内容，则拖动停止。似乎 iframe 会自动获得焦点。有什么办法可以防止这种情况并使拖动正常吗？

var iframe=document.createElement('IFRAME');    
$(div).append(iframe)
       .dialog();

【问题讨论】：

不确定一个简单的修复方法，但它发生的原因是因为<iframe> 正在获取mousemove 事件，并且它没有在主页上冒泡到父document。
这个问题出现在任何带有 IFRAME 的可拖动 div 中（或者附近有 IFRAME 并且您将鼠标快速移动到附近的 IFRAME 上）。我想如果有一个简单的修复，它已经在 jQuery 中自动实现了！但很高兴被证明是错误的。请注意，当您移出 IFRAME 时，拖动操作会正确恢复，因此它并没有完全损坏。它工作正常。
我试过拖动：function(e){ e.stopPropagation(); } 在对话框选项中，但它不起作用。是的，当鼠标离开 iframe 时，拖动操作会正确恢复

标签： jquery dialog draggable

【解决方案1】：

这只是我的猜测，但我会尝试用透明 div 100% 宽度和高度覆盖所有内容，同时拖动并确保它位于 iframe 上方和被拖动的东西下方 :)

【讨论】：

它可以工作，但显然会阻止与 iframe 的交互。
@Guglie 我明确指出它应该只在拖动时被覆盖。无论如何，您将无法将内容拖放到 iframed 文档中（任何现有的拖放实现都不可能）。如果在窗口之间进行通信，定制的解决方案可以做到这一点，但即使不是不可能，也很难做到这一点。

【解决方案2】：

根据 naugtur 的建议，我发现了这个很好的解决方案：

dragStart:function(){
    var divt=document.createElement('div');
    $(divt).attr('id','tempdragdiv');
     divt.style.height='93%';
    divt.style.width='100%';
    $(divt).css('position','absolute').css('left','0')  .css('top','0');                    
    $(div).append(divt);//div where is iframe
    },
    dragStop:function(){
        $('#tempdragdiv').remove();
    }

【讨论】：

+1 表示与接受的解决方案相同的解决方案，仅此解决方案提供示例代码。

【解决方案3】：

您是否尝试过为 iframe 设置 z-index？

var iframe=document.createElement('IFRAME');    
iframe.css('z-index', '-999');
$(div).append(iframe)
       .dialog();

【讨论】：