javascript jquery 对话框可拖动和调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18343941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery dialog draggable and resizable
提问by Ahmed Alaa El-Din
I want to make my div draggable and resizable using jquery. Here is a simple div:
我想使用 jquery 使我的 div 可拖动和调整大小。这是一个简单的div：
<div id="dialog-modal-alerts" title="Alerts" style="display:none;"></div>
and this is how I use jquery:
这就是我使用 jquery 的方式：
$("#dialog-modal-alerts").dialog({
height: 500,
width: 900,
title: strTitle,
resizable:true,
draggable:true,
dialogClass: "alertDialog",
//buttons: [{ text: "Ok", click: function() { $( this ).dialog( "close" ); } }],
close: function (event, ui) { closeDialog(number) },
modal: true
});
And it doesn't work. It works if I write
它不起作用。如果我写它会起作用
$(function () {
$("#dialog-modal-alerts").draggable();
});
But if I write
但如果我写
$(function () {
$("#dialog-modal-alerts").resizable();
});
it's still not working Can anybody help with my issue?
它仍然无法正常工作 有人可以帮助解决我的问题吗？
回答by Ahmed Alaa El-Din
did you check this? it's by default draggable dialog and resizable
你检查了吗？默认情况下，它是可拖动的对话框和可调整大小的
http://jqueryui.com/dialog/#modal
http://jqueryui.com/dialog/#modal
it's about strTitle try to remove it and add 'Title' or anything and close(number) make sure number and strTitle exists as valid variables.
这是关于 strTitle 尝试删除它并添加“标题”或任何内容并关闭（数字）确保数字和 strTitle 作为有效变量存在。
i created this example i working fine:
我创建了这个例子我工作正常：
<div id="dialog-modal-alerts" title="Alerts" style="display:none;">
Hlllo
Ahmed Alaa<br />
</div>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$("#dialog-modal-alerts").dialog({
height: 500,
width: 900,
title: 'Hi',
resizable: true,
draggable: true,
dialogClass: "alertDialog",
modal: true
});
});
回答by David Berger
My best guess is that there is something broken in one of your functions that you haven't shown us, possibly a syntax error, that keeps it from finishing the code. I say this because I can successfully execute your snippet and achieve the desired behavior. Perhaps my full pastebinwill help.
我最好的猜测是，您未向我们展示的某个函数中存在某些问题，可能是语法错误，使其无法完成代码。我这样说是因为我可以成功执行您的代码段并实现所需的行为。也许我的完整粘贴箱会有所帮助。
Note that separately calling
注意单独调用
$("#dialog-modal-alerts").draggable();
is expected to work, since this is a documented jquery ui method. You can mark any item as draggable, whether or not it is a modal dialog, and that's what you've done.
预计会起作用，因为这是一个记录在案的 jquery ui 方法。您可以将任何项目标记为可拖动，无论它是否是模式对话框，这就是您所做的。
On the other hand,
另一方面，
$("#dialog-modal-alerts").resizable();
is not expected to work, since resizable is not it's own function.
预计不会起作用，因为可调整大小不是它自己的功能。
