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脚本上传我的文件，该脚本将图像保存在服务器上，并将带有图像数据的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

找到问题的解决方案，每次加载新照片时，我都会执行以下操作。这初始化resize对象：

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

如何重新初始化jQuery resize包装器？

1 个答案: