gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:24:07 28 4
gpt4 key购买 nike

我正在使用 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" 添加到我的动态小对话框时遇到了问题(注释):

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

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

知道为什么它们不可拖动且不可调整大小吗?

最佳答案

这里是解决问题的方法,Demo只需将 dragableresizable 设置为 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++;
});

关于javascript - jQuery ui 对话框在 appendTo 之后不可拖动和调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25841436/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com