Объект jQuery resizable() не убирается

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

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

По сути, я пытался реализовать resizable() непосредственно в iframe, но это не сработало, поэтому я попробовал этот метод.

Проблема в:

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

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


html iframe jquery resizable
person Sthe    schedule 31.12.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

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

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;
}

js:

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

См. jsfiddle.

person clowwindy    schedule 31.12.2011
comment
Это работает, но я не совсем понимаю. Не могли бы вы объяснить, почему маска div не позволяет iframe захватить событие? - person vanval; 05.12.2015