jQuery UI - 防止对话框拖动到上方 div

Question

有没有办法阻止 jQuery UI 对话框高于或低于 #top div？我不是在寻找 z-index 解决方案，而是在寻找从顶部偏移的东西。在这种情况下，对话框应该无法移动到 #top div.

的区域

有什么建议吗？

HTML:

<div id="top"></div>
<div id="dialog">My dialog</div>

JS:

$(document).ready(function() {
    jQuery("#dialog").dialog({
                            autoOpen:true,
                            modal: false,
                            resizable: true,
                            draggable: true,
                            closeOnEscape: true,
                            title: "Title",
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
    });
});

JSFIDDLE: https://jsfiddle.net/9gku6qrh/

Answer 1

这可能是您正在寻找的 - Keep a jQuery dialog in a div - 您只需要在 #dialog.

周围放置一个父容器