jQuery拖拽桌面图片至Div后无法调整大小问题求助

你猜的没错！这就是动态上传图片导致的问题。

你当前的代码里，$( "#resizable" ).resizable()是在页面初始加载时执行的，这时候从桌面拖拽上传的图片还没有被创建出来，所以jQuery UI没办法给这些后续动态生成的图片绑定调整大小的功能。而页面里预先定义的图片（比如你注释掉的<img src="imgs/pic.jpg" id="resizable"/>）在页面加载时就存在，所以能正常生效。

你需要在动态创建上传图片的DOM元素之后，立即调用.resizable()方法来初始化它的调整大小功能。同时还要注意一个细节：多张图片不能共用同一个id（HTML规范要求id唯一），建议改用class来标记可调整大小的图片。

具体修改如下：

reader.onload = $.proxy(function(file, $fileList, event) {
  if(file.type.match('image.*')) {
    // 创建图片元素并直接初始化resizable功能
    var $img = $("<img class='resizable' src='" + event.target.result + "' />")
      .resizable({
        stop: function( event, ui ) {
          const height = $(this).height();
          const width = $(this).width();
          console.log(`width=${width}, height=${height}`);
        }
      });
    $fileList.prepend( $("<span>").append( $img, " ", file.name ) );
  } else {
    $fileList.prepend( $("<span>").text( file.name ) );
  }
}, this, file, $("#fileList"));

另外，把原来页面加载时的初始化代码也改成针对class选择器，这样既能处理预先定义的图片，也能兼容后续动态生成的元素（不过动态元素我们已经在创建时单独初始化了，这段主要是给页面初始就存在的图片用）：

$( function() {
  $( ".resizable" ).resizable({
    stop: function( event, ui ) {
      const height = $(this).height();
      const width = $(this).width();
      console.log(`width=${width}, height=${height}`);
    }
  });
} );

核心逻辑就是：对于动态生成的DOM元素，必须在元素创建完成后，再绑定对应的jQuery UI交互功能，不能只在页面加载时执行一次绑定——因为页面加载时这些动态元素还不存在，绑定操作自然无法生效。

内容的提问来源于stack exchange，提问作者user826323