如何让 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 获取小提琴。