Jquery - изменение размера или перетаскивание DIV с помощью iframe внутри - PullRequest
Новая
       1

Jquery - изменение размера или перетаскивание DIV с помощью iframe внутри

4 голосов
/ 26 октября 2011

Попробуйте изменить размер DIV в этом примере -> 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

Ответы [ 2 ]

3 голосов
/ 26 октября 2011

Пример перетаскивания 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>
0 голосов
/ 10 января 2014

По этой теме

Вот что у меня сработало 

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