1

jQuery UI を使用して画像のサイズ変更とドラッグを実行しようとしています。これに問題があり、

以下は、jQuery IU によって自動的に追加されたものです。しかし、別の画像をロードしても元のサイズは変わりません。別の画像を動的にロードしても、元の画像の幅と高さが維持されることを意味します。

<div style="overflow: hidden; position: absolute; width: 493px; height: 370px; top: 0px; left: 0px; margin: 0px;" class="ui-wrapper">

これは私のHTMLです

<div id="photo-area">
<div id="photo-canvas">
    <div class="design-mask">&nbsp;</div>
    <div class="photo-wrap">
        <div class="photo-resize">
              <img id="photo-mask" class="pp-photo" />  
        </div>
    </div>
</div>

そして、これは私のJavascriptです

$j(".photo-wrap").draggable({
    containment: "#photo-canvas",
    opacity: 0.35,
});

$j(".pp-photo").resizable({
    aspectRatio: true,
    ghost: true,

});

サーバーに画像を保存するPHPスクリプトを介してファイルをアップロードし、画像データを含むJSONを画像をロードするJS関数に渡します。

$j.each(data.result.files, function (index, file) {
    $j('#photo-mask').load( function(){  

          //JQUERY DRAGGABLE CODE
          .....
          .....
         //JQUERY RESIZABLE CODE
         .....
         .....

     }).attr("src",file.url);
});

これを修正する方法はありますか？

4

1 に答える 1

2

問題の解決策を見つけました。新しい写真を読み込むたびに、次のことを行います。これにより、サイズ変更オブジェクトが初期化されます。

$j('.dl-photo').resizable("destroy");
于 2013-07-25T01:05:54.870 に答える