jQuery resizable() объект не втягивается

Question

Я не понимаю, почему это не работает. У меня есть div с iframe внутри. Я применил jQuery resizable() к div и установил параметр «alsoResize» для моего iframe. Это как это реализовано:

$("#my-frame-wrapper").resizable({ 
    alsoResize : '#myframe' 
}); 

В принципе, я пытался реализовать изменяемыми() непосредственно в IFRAME, но это не будет работать, так что я попробовал этот метод.

Проблема заключается в том:

Если я растянуть DIV, он работает (изменяет), но он не хочет, чтобы убрать (если я перетащить обратно). Вместо этого он просто выходит из-под контроля (в Chrome), и он начинает прыгать вверх и вниз на каждом перемещении мыши (очень раздражает, что я должен добавить).

Есть ли что-нибудь, что мне не хватает? Кто-нибудь еще испытал эту проблему?

Answer 1

Событие мыши внутри элемента iframe не выйдет, поэтому пользовательский интерфейс JQuery не реагировал, когда вы перетаскиваете назад.

Чтобы предотвратить iframe от захвата события мыши, вы можете добавить div маски при запуске drag.

HTML:

<div id="my-frame-wrapper"> 
    <iframe id="my-frame" src="http://jsfiddle.net/"></iframe> 
    <div id="mask"></div> 
</div> 

CSS:

#my-frame-wrapper { 
    width:200px; 
    height:100px; 
    position:relative; 
} 
#my-frame { 
    width:100%; 
    height:100%; 
} 
#mask { 
    position:absolute; 
    top:0; 
    left:0; 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    display:none; 
} 

ЯШ:

$(function(){ 
    $("#my-frame-wrapper").resizable({ 
     start: function(event, ui) { 
      $("#mask").css("display","block"); 
     }, 
     stop: function(event, ui) { 
      $("#mask").css("display","none"); 
     } 
    }); 
}); 

См jsfiddle.