在画布中使用Jquery UI可调整大小/可拖动div的问题

Question

In this plunk我将div添加到画布中。 div是可调整大小和可拖动的（使用Jquery UI）。

目标是在画布的范围内调整/拖动许多div。

单击按钮创建新的div。这些应该在相对于画布的顶部= 50px，左边= 50px处创建。

有几个问题：

1 - 如果你点击＆＃34; New Div＆＃34;很多时候，即使我强迫它们（新的div进一步向下创建），也不会尊重top / left属性。

2 - 如果你调整div的大小，由于某种原因，画布高度减少到0px

3 - 如果我在画布周围移动div，我希望画布放大以包含div，因为div被附加到画布上。但是，您仍然看到画布边框并不总是包含div。

此代码有什么问题？

HTML

<button onclick="add()">New Div</button>
<div id="canvas"></div>

CSS

.div1 { width: 160px; height: 200px; position:absolute; border:1px solid black; background-color: #d2d2d2 }
canvas {width: 100%; height: 100%;border:1px dashed gray; position:relative;}

的Javascript

function add(){

    var $canvas = $("#canvas");
    var $div = $("<div></div>");
    $div.appendTo($canvas);

    // this is what doesn't work
    $div.css({ top: '50px', left: '50px' });

    $div.draggable();   
    $div.resizable();
    $div.addClass('div1');

}