Question

尝试在此示例中调整DIV的大小 - ＆gt; http://jsbin.com/ixesak/edit#preview

光标在Youtube-Player上移动（在调整大小或拖动时），结果是调整大小功能停止。希望有人可以帮助我。

JS

$(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

Answer 1

drag iframe example

使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>

Answer 2

根据此thread

这对我有用

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

Jquery - 在内部使用iframe调整或拖动DIV

2 个答案: