编程语言
首页 > 编程语言> > javascript – jQuery ui对话框在appendTo之后不可拖动和调整大小？

javascript – jQuery ui对话框在appendTo之后不可拖动和调整大小？

作者：互联网

我正在使用jquery ui对话框实现便签.在一个按钮上单击一个大的全屏ui对话框打开,在该大对话框内是一个添加小对话框(注释)的按钮.

HTML：

<body>

  <button id="opener">open the dialog</button>

  <div id="outter-dialog" title="Notes">
    <button id = "add-note">Add Note</button>
  </div>

JS：

$( "#outter-dialog" ).dialog({
        autoOpen: false,
        title: "Success Message",
        width: $(window).width(),
        height: $(window).height(),
        modal: false,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$("#opener").click(function(){
    $( "#outter-dialog" ).dialog('open');
});


var prevelement;
$("#add-note").click(function () {
    var dynamicDialog = $('<div id="MyDialog"> <textarea>Hello</textarea> </div>');
    var pos;
    if (prevelement) {
        pos = {
            my: "left",
            at: "bottom",
            of: prevelement
        }
    }

    dynamicDialog.dialog({
        title: "Note",
        modal: false,
    appendTo: "#outter-dialog",
        buttons: [{
            text: "Save",
            click: function () {}
        }],
        position: pos
    });
    prevelement = dynamicDialog
});

现在我在向动态小对话框(注释)添加appendTo：“#outter-dialog”时遇到问题：

将它们附加到outter对话框后,它们将不再可调整大小和可拖动.

我将它们添加到outte dilaog框中,以便在打开/关闭外部对话框时显示/隐藏内部注释.

知道为什么他们不可拖动和可调整大小？

解决方法:

这是你克服这个问题的方法,Demo
只需将dragable和resizable设置为false,并在创建对话框后单独调用它们.并记住克隆动态元素并为该元素使用动态id

var elementCount = 0;
$("#add-note").click(function () {
    var dynamicDialog = $('<div> <textarea>Hello</textarea> </div>');
    var pos = {
        my: "left",
        at: "bottom",
        of: "#dialog" + elementCount
    }

    var dialogId = "dialog" + elementCount;
    dynamicDialog.clone(true).attr("id", dialogId).dialog({
        title: "Note",
        modal: false,
        appendTo: "#outter-dialog",
        draggable: false,
        resizable: false,
        buttons: [{
            text: "Save",
            click: function () {}
        }],
        position: pos
    });
    $("#" + dialogId).parent().draggable().resizable();
    elementCount++;
});

标签：jquery,javascript,jquery-ui,jquery-ui-dialog,appendto
来源： https://codeday.me/bug/20190528/1172805.html