jQuery-Ui 可调整大小：div 大小限制为神奇的边框

Question

当我尝试在将 div 容器 (#draggableItem) 放入指定的 div 字段 (#newSide) 后调整其大小时，它仅限于左侧和底部区域的一种“神奇边框”。

我的例子是这个jsFiddle。

程序：

1. 将黄色框拖到灰色区域的中间。
2. 将黄色框的大小调整到灰色区域的下端（或左端）。

我读过一个错误并尝试了不同的位置设置：绝对/相对和带有 !important 标记，但我不明白。

关于如何解决问题的任何想法？这是一个错误的 CSS 设置吗？ （对我来说，有必要将可放置区域放置在我想要的任何位置（不仅仅是顶部：0px；左侧：0px；）

还是非常感谢！

HTML 代码：

<div id="editor">
  <div id="newSide"></div>
</div>
<div class="draggableItem"></div>

JS代码：

$(function() {

$( "#newSide" ).droppable({
    drop: function( event, ui ) {
    }
});

$(".draggableItem").resizable({
                    containment: "#newSide",
                    grid: 1, maxHeight: 150, maxWidth: 200, minHeight: 20, minWidth: 20
                    })
                    .draggable({
                          containment: "#newSide",
                          grid: [1,1]
                    }); 
});

CSS：

#editor{
    display:block;
    position: absolute;
    border: 2px solid red;
    top:100px;
    left:100px;
}

.draggableItem
{
    width:100px;
    height:100px;
    background:yellow;
}

#newSide
{
    display:block;  
    width:401px;
    min-height:301px;
    height:301px;
    background-color:#444444;
}

Answer 1

我不确定这是否是您要找的？

HTML 结构：

<div id="editor">
    <div id="newSide">
        <div class="draggableItem"></div>
    </div>
</div>

演示：http://jsfiddle.net/QU994/13/