Jquery UI resizeable arbeitet nicht an angehängtem Bild in Chrome

Question

Ich versuche, Jquery UI resizeable und ziehbare auf ein angehängtes Bild zu verwenden. Es funktioniert in Firefox, aber in Chrome und Safari wird das angehängte Bild überhaupt nicht angezeigt.

Ich verwende dropzone.js für meinen Datei-Upload. Ich nenne eine ihrer Funktionen das Bild zu bekommen:

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

Dann meine eigene Funktion nenne ich das Bild in meinem Verzeichnis zu setzen und das Bild an den Test div anhängen:

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")}); 

} 

In Chrom und Safari, wenn ich das Element inspiziere es zeigt das Bild wurde an die .test div angehängt, aber es wird nicht auf dem Bildschirm angezeigt. Es ist kein CSS-Problem, ich habe Elemente entfernt, um zu sehen, ob die Positionierung es wegwarf, aber es würde immer noch nicht angezeigt werden. Wenn ich die resizeable Funktion entferne, zeigt das Bild an und zieht gerade gut. Kann jemand sehen, warum es in Firefox funktionieren würde, aber nicht in Chrome oder Safari?

Answer 1

Nach dem, was ich zusammen konnte, machte ich diesen Test:

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"); 
    }); 
}); 

Dies funktioniert und ermöglicht es der Div hinter gezogen werden, und das Bild angepasst werden. Ich habe das in FireFox gemacht und es auf Chrome & Safari verschoben. Beides funktionierte gut.

Wenn Sie Ihren neuen Code betrachten, sollte er funktionieren, solange imgPath mit einer URL oder URI gefüllt ist.