jQuery对话框：拖动包含iframe的对话框

Question

当使用jQuery对话框并包含iframe内部时，拖动对话框时鼠标经过iframe内容时，拖动会停止。似乎iframe自动获取焦点。 是否有任何方法可以防止这种情况发生，使拖动正常运作？

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

- albanx

---

不确定是否有简单的解决方法，但发生这种情况的原因是因为<iframe>正在获取mousemove事件，而它没有冒泡到主页面的父级document。 - Nick Craver

这个问题发生在任何带有IFRAME的可拖动div中（或者在附近有IFRAME并且您快速移动鼠标到那些附近的IFRAME时）。我想象如果有一个简单的解决方法，它已经被自动实现在jQuery中了！但如果被证明是错误的，我会很高兴。请注意，当您移开IFRAME时，拖动操作会恢复正常，因此它并没有完全损坏。它可以正常工作。 - Daniel Earwicker

我尝试在对话框选项中使用drag:function(e){ e.stopPropagation(); }，但它不起作用。 是的，当鼠标移出iframe时，拖动操作会正确恢复。 - albanx

Answer 1

这只是我的猜测，但我会尝试用一个透明的 div 全屏覆盖，同时拖动时确保它在 iframe 上方且在被拖动的物体下方 :)

- naugtur

---

它可以工作，但显然会阻止与 iframe 的交互。 - Guglie

@Guglie，我明确表示只有在拖动时才应该覆盖它。无论如何，您都无法将东西拖放到带有iframe的文档中（使用任何现有的拖放实现都不可能）。如果使用自定义解决方案可以通过窗口间通信来实现，但是要使其平滑可能会很困难，甚至不可能。 - naugtur

Answer 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();
    }

- albanx

---

+1 对于与已接受答案相同的解决方案，此答案提供了示例代码。 - Moe Sweet

Answer 3

你尝试设置 iframe 的 z-index 了吗？

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

- Christian Smorra