对话框不会保留为父级的子级

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: "#main_section" });

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

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

---

限制拖动到指定元素或区域的范围内。

支持多种类型：

选择器：可拖动元素将包含在选择器找到的第一个元素的边界框内。如果没有元素 找到，不会设置收容措施。

元素：可拖动元素将包含在该元素的边界框内。

字符串：可能的值：“父”、“文档”、“窗口”。

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