2

jQueryのresizable（）関数を使用して、幅と高さが100％に設定されたiframeを含むdivのサイズを変更しています（divのスペースを埋めるため）。私が抱えている問題は、どちらかの方向に内側にサイズ変更（divを縮小）すると、マウスをすばやく動かすとグラブが失われ（divが固定される）、マウスを隅に再配置するまでサイズが変更されなくなることです。

divを展開するときは問題なく動作します。マウスをすばやく動かすことでそれを行うことができますが、divが動かなくなってしまわないように、慎重にdivを動かす必要があるのは面倒です。

何か案は？

どうもありがとう。

編集：

例を自分のWebサイトにアップロードしました： http ：//stefandunn.co.uk/concepts/drag&drop/

「ウェブページ」ウィジェットをクリックしてサイズを変更するだけです。

4

2 に答える 2

8

In the past I have the same problem and the solution/hack that I found is this:

$("yourObjectToResize").resizable({
    //containment: 'parent',
    minWidth: 400,
    minHeight: 200,
    start: function () {
        $(".widget_box").each(function (index, element) {
            var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
            $(element).append(d);
        });
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});
于 2012-08-23T14:51:50.647 に答える
0

Without a live example it is hard to tell, but I assume that it is because of other hover/mouse events in the iframe itself. You could try looking at the following options when the resize is happening:

.preventDefault();
.stopPropagation();
.stopImmediatePropagation();

Ok had a quick peek, I think if you use the the start: event on .resizeable(), to set the z-index of the web-page div above the z-index of the iframe and then put it back below on the stop: event you should be good.

Hmm I dont think the z-index will work, try the options above in the start event of .resizable();

If I have time later I'll try and setup a proper test and have a look for you.

于 2012-08-23T14:51:37.527 に答える