如何让一个jQuery对话框留在div中

Question

我试图将一个对话框（#dialog）留在容器div（#dialogContainer）中，即我不希望它可以将对话框拖到ui中容器div的边界之外，但是没有成功。我认为“appendTo”设置可以解决这个问题，但不是。任何帮助表示赞赏！

这是一个示例，表明它确实可行： https://jqueryui.com/dialog

代码：

<div id="dialogContainer" style="width:600px;height:500px;border:1px solid blue;"></div>
<div id="dialog" title="Dialog Title">
    This is dialog content.
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $("#dialog").dialog({
            position: {
                my: 'left top',
                at: 'left',
                of: $('#dialogContainer')
            },
            draggable: true,
            appendTo: "#dialogContainer",
            modal:true
        });
    });

</script>

Answer 1

您可以使用以下代码限制对话框，以便将其拖到容器外：

$("#dialog").dialog({
    ...
})
.parent().draggable({
    containment: '#dialogContainer'
});

请参阅here获取小提琴。