在Chrome中，Jquery UI可调整大小不适用于附加图像

Question

我尝试在附加的图像上使用Jquery ui的可调整大小和可拖动。它可以在Firefox中工作，但在Chrome和Safari中，附加的图像根本不会显示出来。

我正在使用dropzone.js上传我的文件。我调用其中一个函数来获取图像：

Dropzone.prototype.submitRequest = function(xhr, formData, files) {
      sendFile(formData);
};

然后，我调用自己的函数将图像放到我的目录中，并将图像附加到测试div：

var sendFile = function(formData){
  console.log(formData);
        $.ajax({
        url  : '/MoveFiles.php',
        data : formData,
        type : 'post',
        processData : false,
        contentType : false,
        success : function(response){
            testing();
        },
        error : function(response){
           console.log('error - ' + JSON.stringify(response));
        }
    });
};
var testing = function(){

  $(".test").append($('<img src="' + imgPath + '" class="resize-image" />'));
  $( ".test" ).draggable({containment: $("#holder")});
 $('.resize-image').resizable({containment: $("#holder")});

}

在chrome和safari中，当我检查元素时，它显示图像被附加到.test目录，但没有显示在屏幕上。这不是css的问题，我已经删除了元素，以查看定位是否将其抛出，但它仍然不显示。当我去掉可调整大小的函数时，图像就会显示出来，并且可以很好地拖动。有没有人知道为什么它可以在Firefox中工作，而不能在Chrome或Safari中工作？

Answer 1

根据我所能做的，我做了这个测试：

https://jsfiddle.net/Twisty/yd1ppdp4/

HTML

<div id="holder" class="wrapper">
  <div class="test">
  </div>
</div>
<button id="execute">
  Get Image
</button>

CSS

.wrapper {
  padding: 0;
  margin: 0;
  background: #ddd;
  border: 1px solid #ccc;
  width: 340px;
  height: 240px;
}

.test {
  background: #fff;
  border: 1px dashed #aaa;
  border-radius: 3px;
  padding: 15px 3px 3px 3px;
  width: 100px;
  height: 100px;
  position: relative;
}

.resize-image {
  position: absolute;
  top: 15px;
  left: 3px;
  width: 100px;
}

jQuery

$(function() {
  var testing = function(imgPath) {
    $(".test").append($('<img src="' + imgPath + '" class="resize-image" />'));
    $(".test").draggable({
      containment: $("#holder")
    });
    $('.resize-image').resizable({
      containment: $("#holder")
    });
  }
  $("#execute").click(function() {
    testing("https://il7.picdn.net/shutterstock/videos/12588167/thumb/1.jpg");
  });
});

这是可行的，并且允许拖动Div be，以及调整图像大小。我在FireFox中做到了这一点，并将其转移到了Chrome & Safari上。两者都工作得很好。

查看您的新代码，只要用URL或URI填充了imgPath，它就应该可以工作。