Как я могу повторно инициализировать упаковщик изменения размера jQuery?

Question

Попытка изменить размер изображения и перетаскивание с помощью 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 Script, который сохраняет изображение на сервере, и передаю 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);
}); 

Любые идеи, как это исправить?

Answer 1

Нашел решение проблемы, Каждый раз, когда я загружаю новую фотографию, я делаю следующее. Это инициализирует объект изменения размера:

$j('.dl-photo').resizable("destroy");