Jquery - 调整大小或拖动包含 iframe 的 DIV

Question

请尝试调整此示例中的DIV大小 -> http://jsbin.com/ixesak/edit#preview

当鼠标移动到Youtube播放器上（调整大小或拖动时），结果是调整大小功能停止工作。希望有人能帮忙解决。

$(document).ready(function()
{  
  $('#test').draggable().resizable(); 
});

HTML

  <div id="test" style="padding:20px; background-color:#f00;">
  <iframe class="youtube-player" type="text/html" width="100%" height="100%" src="http://www.youtube.com/embed/NugRZGDbPFU?autoplay=1" frameborder="0"></iframe>
  </div>

更新： 一种解决方案，但可能不是最佳解决方案？
http://jsbin.com/ixesak/7/edit

- Peter

---

问题与YouTube播放器无关，而是与iframe有关。尝试使用其他任何网站，问题仍然存在。 - Simon Stender Boisen

@Jason Gennaro，请尝试快速调整div大小。 - Peter

@Simon Skov Boisen，你是对的！有什么“变通”的想法吗？ - Peter

Answer 1

拖动iframe示例

将iframeFix设置为iFrame的覆盖层，因为iFrame正在占用鼠标事件。设置iframeFix的宽度和高度，以便可以看到调整大小的手柄，并根据需要进行其他必要的CSS设置。

<div id="cont" style="height:1000px; width:1000px; background-color:grey;">
    <div id="test" style="padding:20px; background-color:#f00;">
        <div id="iframeFix" style="display:block; background:transparent; position:absolute; width:100%; height:100%; z-index:9999999;"></div>
        <iframe class="youtube-player" type="text/html" width="100%" height="100%" style="z-index:2000!important;" src="http://www.youtube.com/embed/NugRZGDbPFU?autoplay=1" frameborder="0"></iframe>
    </div> </div>

- zdrsh

Answer 2

根据这个线程，

以下是对我有效的方法。

$('#Div').draggable({ iframeFix: true });

- JFC