Draggable Resizable无法在Chrome中运行

我在使用chrome中的图像上进行可resize和可拖动的工作时遇到了一些问题。 我的页面有一个(可拖动的)图像列表,可以放在div上(图像被克隆)。 丢弃的图像应该可以resize和拖动。 我写了以下Javascript:

$(function() { $(".scrollable").scrollable(); $(".draggable").draggable({ helper: 'clone', appendTo: 'body' }); $("#canvas").droppable({ accept: '.draggable', drop: function(e, ui){ if (ui.draggable.attr("class").indexOf('item') == -1){ var clone = $(ui.draggable).clone(); clone.removeClass("ui-draggable draggable"); clone.addClass('item'); $(this).append(clone); $('.item').resizable({ containment: 'parent', aspectRatio: true }).parent().draggable({ containment: 'parent' }); } } }); }); 

这在Firefox中生成以下代码,完美地运行:

 
Description-sm

但是在chrome中,元素被拖动和克隆,但它们没有显示。 从以下代码生成中可以明显看出:

 
Description-sm

但是,我无法理解为什么图像的宽度和高度以及相应的外部div的宽度和高度达到0px。 一个简单的解决方案是在javascript中改变高度/宽度,但我相信会有更好的解决方案。

谢谢你的帮助。

诀窍是专门为img标签添加高度和宽度。 没有它,div和图像高度显式设置为零(但仅限于chrome)。