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

Это может быть то, что вы ищете - Держите диалог jQuery в div - вам просто нужно поместить родительский контейнер в #dialog.