Jquery UI resizeableがChromeの添付イメージで動作しない

Question

添付イメージでJquery UIのサイズ変更可能とドラッグ可能を使用しようとしています。 Firefoxでは動作しますが、ChromeやSafariでは追加された画像はまったく表示されません。

ファイルのアップロードにdropzone.jsを使用しています。その後、私は私のディレクトリに画像を入れて、テスト用のdivに画像を追加するために自分自身の関数を呼び出し

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

：私は、画像を取得するために、その機能のいずれかを呼び出す

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のと私が要素を調べると画像が表示されますが、画像は.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"); 
    }); 
}); 

これは動作し、背後に本部をドラッグすることができ、そして画像はサイズを変更します。私はFireFoxでこれを行い、Chrome & Safariに移動しました。どちらもうまくいった。

新しいコードを見ると、imgPathにURLまたはURIが入力されている限り動作するはずです。