jQuery resizing() 对象不缩回

发布于 2024-12-23 17:15:24 字数 413 浏览 2 评论 0原文

我不明白为什么这不起作用。我有一个 div，里面有一个 iframe。我将 jQuery resizing() 应用于 div 并为我的 iframe 设置了“alsoResize”选项。这是它的实现方式：

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

基本上，我试图直接在 iframe 中实现 resizing() ，但它不起作用，所以我尝试了这个方法。

问题是：

如果我拉伸 div，它会起作用（调整大小），但它不想缩回（如果我向后拖动）。相反，它完全失去了控制（在 Chrome 中），并且每次鼠标移动时它都会开始上下弹跳（我必须补充一点，非常烦人）。

我有什么遗漏的吗？还有其他人遇到过这个问题吗？

原文

I don't understand why this doesn't work. I have a div with an iframe inside. I applied jQuery resizable() to the div and set the "alsoResize" option to my iframe. This is how it's implemented:

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

Basically, I was trying to implement resizable() directly to the iframe, but it wouldn't work, so I tried this method.

The problem is:

If I stretch the div, it works (resizes), but it doesn't want to retract (if I drag back). Instead, it just goes completely out of control (in Chrome) and it starts bouncing up and down on every mouse-move (very annoying I must add).

Is there anything I am missing? Has anyone else experienced this problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绅刃 2024-12-30 17:15:24

iframe 元素内的鼠标事件不会消失，因此当您向后拖动时，JQuery UI 不会做出反应。

为了防止 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。

Mouse event inside the iframe element won't get out, so JQuery UI didn't react when you drag back.

In order to prevent iframe from capturing mouse event, you can add a mask div when drag is start.

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

See jsfiddle.

回复收藏 0 原文

~没有更多了~