2

コードはChromeで動作し、IE9で動作するようにコードを取得しようとしています。封じ込めなしでdraggable（）で適切に動作しますが、封じ込めが親に設定されている場合、動作をひどく台無しにします。

img = $("<img alt='Preview' id='preimg' src='" + data.result.url +"' />")
$('#preimage').append(img);
$('#preimage').resizable({
                    'aspectRatio':true,
                    'handles':"all",
                    'autoHide':true,
                     containment: "parent"
                }).draggable({
                            containment: "parent"
                        });

親の位置は相対に設定されます。jquery1.7.2とjquery-ui1.8.20を使用しています。回避策はありますか？

編集

多くのテストの結果、divのコンテナサイズの計算が正しく機能していないことがわかりました。実際にdivのサイズを変更しなくても、サイズ変更を有効にして機能させることができました。ドラッグ可能な包含領域のサイズを変更するとすぐにサイズが小さくなり、サイズを複数回変更すると、ドラッグオプションが機能しなくなるまで、この領域が小さくなります。

4

1 に答える 1

2

これらの問題に関するjquery uiライブラリのバグレポートがいくつかあることがわかりました - http://bugs.jqueryui.com/report/10?P=resizable

広範囲にテストした回避策を見つけることができ、ほとんどの状況で機能するはずです。ここで重要なのは、フローティングではなく相対位置を持つコンテナー div を使用する必要があるということです。フローティング/絶対 div を使用する必要がある場合は、その中に div を作成し、位置を相対に設定します。質問のコードの場合、html は次のようになります。

<div class="outer"> 
    <div class="container">
         <div id="preimage"></div>
    </div>
</div>

css は次のようになります。

.outer{
position:absolute;
right:0;
}
.container{
position: relative; 
}

サイズを変更するときに要素をドラッグすることはできません。

$('#sqoutline2').resizable({
        'handles':"all",
        'autoHide':false,
        containment: "parent",
        start:function(){$('#sqoutline2').draggable('options','disabled','true');},
        stop:function(){$('#sqoutline2').draggable('options','disabled','false');}
    }).draggable({containment:"parent",
            start:function(){$('#sqoutline2').resizable('options','disabled','true');},
           stop:function(){$('#sqoutline2').resizable('options','disabled','false');}
       });
于 2012-08-15T21:23:32.300 に答える