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 div，但它没有显示在屏幕上。这不是一个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，并调整要调整大小的图像。我在FireFox中做到了这一点并将其移至Chrome＆amp;苹果浏览器。两者都运作良好。

查看新代码，只要imgPath填充了网址或URI，就应该有效。

Jquery UI可调整大小，无法处理Chrome中的附加图像

1 个答案: