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

Posted 2023-05-08

【中文标题】jQuery UI - 防止对话框拖到 div 上方

【英文标题】：jQuery UI - Prevent dialog from dragging above div

【发布时间】：2019-04-15 18:54:19

【问题描述】：

有没有办法防止 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/

【参考方案1】：

这可能是您正在寻找的 - Keep a jQuery dialog in a div - 您只需在 #dialog 周围放置一个父容器。

【讨论】：

你是对的。带有解决方案的新 jsfiddle jsfiddle.net/10h8qjov