Jquery的UI可調整大小不工作在Chrome中的追加圖像

我想使用JQuery UI的可調整大小和可拖動的附加圖像。它適用於Firefox，但在Chrome和Safari中，附加的圖像根本不顯示。Jquery的UI可調整大小不工作在Chrome中的追加圖像

我正在使用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？

來源

2016-07-15 user2573699

我們仍然需要更多的代碼或示例來測試。請提供更詳細的問題。 – Twisty

@Twisty我添加了更多代碼。希望有所幫助，我沒有一個可以測試的例子，我正在本地開展項目。 – user2573699

何時分配了「imgPath」？ – Twisty

基於什麼我可以放在一起，我做了這個測試：

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瀏覽器& Safari。兩者都很好。

看着你的新代碼，只要imgPath填充了一個URL或URI，它就會工作。

來源

2016-07-15 15:52:27 Twisty

對不起，我錯過了這一點，imgPath正在填充從MoveFiles文件保存的圖像。我看到你的例子在jsfiddle中工作，但不是我的代碼。我想知道是否它與dropzone，這是導致它不適用於Chrome和Safari的東西。 – user2573699

Jquery的UI可調整大小不工作在Chrome中的追加圖像

回答

相關問題