4

私はこのjsfiddleに画像を持っています - http://jsfiddle.net/stevea/5S5NW/4/ - サイズを変更可能にした後、サイズ変更可能なui-wrapperにdraggable()を適用してドラッグ可能にしました画像の周り：

$(function(){       
    $('img#pelican').resizable({aspectRatio : true});
    $('img#pelican').closest('.ui-wrapper').draggable();
});

resizable() と draggable() が最初に適用された後、Firebug でわかるように、ui-wrapper は position:relative スタイルになります。これは、画像をドラッグしても残ります。しかし、画像のサイズ変更を開始するとすぐに、ui-wrapper スタイルが position:absolute に変わります。なぜこれが起こるのですか？

ボタンで位置を強制的に相対位置に戻すと、サイズを変更するとすぐに絶対位置に戻ります。draggable() 行を省略した場合、画像のサイズを変更するだけで問題なく動作します。つまり、サイズ変更後も position:relative のままです。

ここで何が起こっているか知っている人はいますか？position:relative のままで、サイズ変更可能でドラッグ可能な画像を作成するにはどうすればよいですか?

ありがとう

4

1 に答える 1

0

フィドルを更新しました：http://jsfiddle.net/5S5NW/5/

このドキュメントでサイズ変更イベントを見つけることができます: http://api.jqueryui.com/resizable/#event-resize

私がしていることは単純です。サイズ変更中に、css プロパティの相対位置に css を追加します。

resize: function(){
  $(this).css('position', 'relative');
}

jqueryがその位置を絶対に設定する理由があることに注意してください。すべてが期待どおりに機能する場合は、ブラウザと必要な機能を確認してください。

于 2015-03-19T12:25:10.320 に答える