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中的追加图像

回答

相关问题