jQuery resizable（）图像在draggable（）div中工作

目前我有图像上传表格，我们可以上传多个图像并在div内拖动此图像。

请看我的表格

    
 $( function() { var inputLocalFont = document.getElementById("user_file"); inputLocalFont.addEventListener("change",previewImages,false); function previewImages(){ var fileList = this.files; var anyWindow = window.URL || window.webkitURL; for(var i = 0; i < fileList.length; i++){ var objectUrl = anyWindow.createObjectURL(fileList[i]); $('.new-multiple').append('
'); window.URL.revokeObjectURL(fileList[i]); } $( ".img-div" ).draggable(); $( ".newly-added" ).resizble(); } }); 

在这里，当我上传图像时，它将显示在新的多重div上。 我也可以拖动这些图像。

js fidle： https ：//jsfiddle.net/vd11qyzv/1/

但是可以解决问题。 请帮忙 。

Answer 1

第一：

 $( ".newly-added" ).resizble(); 

这将失败，你会看到：

TypeError：$（…）。resizble不是函数

通过使用正确的函数名称来解决此问题：

 $( ".newly-added" ).resizable(); 

其次，您可以做很多事情来清理和改进代码。

JavaScript的

 $(function() { var inputLocalFont = $("#user_file"); inputLocalFont.change(previewImages); function previewImages(e) { var fileList = this.files; var anyWindow = window.URL || window.webkitURL; $.each(fileList, function(key, val) { var objectUrl = anyWindow.createObjectURL(val); var $newDiv = $("
", { id: "img-div-" + key, class: "img-div" }) .draggable() .appendTo($('.new-multiple')); var $newImg = $("", { src: objectUrl, id: "img-" + key, class: "newly-added" }) .resizable() .appendTo($newDiv); window.URL.revokeObjectURL(val); }); } }); 

运行此测试代码（ https://jsfiddle.net/Twisty/vd11qyzv/2/ ），您将获得以下HTML输出：

您可以看到draggable和resizable都是为它们各自的元素定义的。

UPDATE

在作业中发现了一个小问题。 交换.resizable()和.appendTo()作为resizable似乎在被追加之前被分配了一个问题。

工作示例： https ： //jsfiddle.net/Twisty/vd11qyzv/3/

我还添加了一些样式，以帮助确保可拖动和可resize不会发生冲突。