Question

在http://jqueryui.com/dialog/上，他们使用iframe将对话框保持在页面上的某个区域内。这可以在不使用iframe的情况下实现吗？

我尝试将对话框附加到容器但只影响它在DOM中的位置，对话框仍然可以移动到整个地方。

到目前为止，这是我的尝试：

$("#terminal[type=launcher]").click(function(){
                $("<div />")
                .dialog({
                    "title" : "root@" + window.location.hostname,
                    "width" : 400,
                    "height" : 300,
                    "modal" : false,
                    "resizable" : true,
                    "close" : function(){ $(this).remove(); },
                    "Cancel" : function(){ $(this).dialog("close"); },
                    appendTo : "#main_section"
                })
                .dialogExtend({
                    "close" : true,
                    "maximize" : true,
                    "minimize" : true,
                    "dblclick" : "collapse",
                    "titlebar" : false
                })
                .draggable({ containment: "parent" });
            });

Answer 1

jQuery Draggable

通过定义边界来约束每个可拖动的移动可拖动的区域。设置轴选项以限制可拖动路径到x轴或y轴，或使用包含选项指定父级 DOM元素或jQuery选择器，如'document。'

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

您可以在任何父元素中包含对话框。使用jQuery UI draggable。

jQuery UI Draggable Constrain Movement

保持对话框包含在一个区域内

1 个答案: