Jquery ui jQuery UI可调整大小+；可拖动：在下降时消失

我试图允许将图像拖放到容器中并启用大小调整，但是，当拖放图像时，它将消失，直到拖动句柄为止。控制台中没有错误

这似乎是CSS产生的问题吗？我曾尝试更改z索引，但没有效果

有没有人对这是什么原因有什么建议

问题如下：

JS:

HTML:

<div class="container">      
    <div id="toolbar">
       Tools:
       <div class="droppableShape strokeTool">
           <img width="125" src="http://41.media.tumblr.com/75b247a33fee823ac735d86270cfa813/tumblr_mp5loljbFz1s56exfo1_500.png" />
       </div>

    </div>

    <div id="canvas_area">
        <div class="canvas ui-droppable" id="page1"><img src="http://www.astrologychanneletc.com/wp-content/uploads/2014/09/blankcanvas.jpg"></div>
    </div>
</div>

工具：

我不知道为什么，但是在

img

上调用

.resizable（）

会导致创建一个

div.ui-wrapper

作为其父级，而这个新的

div

的宽度和高度为0。解决方案是在

new\u字段

上调用

.resizeable（）

，而不是调用其中的

img

：

new_field.resizable({
  maxHeight: 47,
  maxWidth: 151,
  minHeight: 18,
  minWidth: 60,
  aspectRatio: 151 / 47 
});

然后，要在调整其父级

div

的大小时增大/缩小您的

img

，请添加一个事件侦听器：

new_field.on("resize", function(rEvent, rUI) {
  new_field.find("img").css({
    "width": rUI.size.width,
    "height": rUI.size.height
  });
});

在Linux上的Chrome和Firefox中对我有效

---

谢谢你！帮助很大。我还可以通过在追加后将字段声明为可调整大小来解决这个问题

new_field.on("resize", function(rEvent, rUI) {
  new_field.find("img").css({
    "width": rUI.size.width,
    "height": rUI.size.height
  });
});