JQuery Dialog可调整大小的包含

Question

我正在尝试为JQuery Dialog添加一个可拖动且可调整大小的包含。我找到了关于draggable和resizable的其他问题和答案。但是，与Dialog结合使用仍然存在问题。

因此我改变了我在这里找到的一个小提琴。

HTML：

<div id="ParentDIV">
    <div class="dragClass">
        <p>Drag me around!</p>
    </div>
</div>

JQuery的：

$(".dragClass").dialog().parent()
.draggable({
    cursor: "move",
    delay: 100,
    containment: "#ParentDIV",
    scroll: false
})
.resizable({
    containment: '#ParentDIV'
});

的CSS：

#ParentDIV {
    position: relative;
    margin: 50px 0 0 50px;
    width:500px;
    height:200px;
    background:lightgray;
}
.dragClass {
    font-family: Tahoma, sans;
    color: black;
    background: orange;
    border: 1px solid orange;
    width: 10em;
    height:auto;
    padding: 0.5em;
}
textarea {
    font-family: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    width: 100%;
    height: 100%;
    resize: none;
}
.ui-resizable-helper {
    border: 2px dotted #00F;
}

小提琴：http://jsfiddle.net/v4zfc8uc/

问题是当您在收容区域有边距时尝试调整对话框大小时，对话框仍然表现为没有边距。

可拖动的遏制似乎正在做它的工作。