Question

如果我这样做：

$("#my_button").click(function(){
    $("<div />")
    .appendTo("#main_section")
});

结果div是#main_section的孩子。但是，当我这样做时：

$("#my_button").click(function(){
    $("<div />")
    .appendTo("#main_section")
    .dialog({
        "title" : "ABC"
        "width" : 400,
        "height" : 300,
        "modal" : false,
        "resizable" : true,
        "close" : function(){ $(this).remove(); },
        "Cancel" : function(){ $(this).dialog("close"); },
    })
     .draggable({ containment: "parent" });
});

生成的对话框最终成为body的直接子项。

我尝试过和没有：

appendTo : "#main_section"

对话框选项。

这是我更新的代码：

$("#my_button").click(function(){
    $("<div />")
        .dialog()
        .draggable({ containment: "#main_section" });
});

我的对话框仍未包含在#main_section中（也不是它的孩子）

Answer 1

jQuery UI Draggable Containment

.draggable({ containment: "#main_section" });

您需要将边界设置为元素而不是父元素...

现在，您也可以在正确包含对话框后删除appendTo()

约束拖动到指定元素或区域的范围内。

支持多种类型：

选择器：可拖动元素将包含在选择器找到的第一个元素的边界框中。如果没有元素    发现，不会设置遏制。

元素：可拖动元素将包含在此元素的边界框中。

字符串：可能的值：＆＃34; parent＆＃34;，＆＃34; document＆＃34;，＆＃34; window＆＃34;。

数组：定义[x1，y1，x2，y2]形式的边界框的数组。

Dialog不会留下父母的孩子

1 个答案: