Question

我想使用jquery使我的div可拖动并可调整大小。这是一个简单的div：

<div id="dialog-modal-alerts" title="Alerts" style="display:none;"></div>

这就是我使用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
        });

它不起作用。如果我写

，它会起作用

$(function () {
        $("#dialog-modal-alerts").draggable();
    });

但如果我写

$(function () {
        $("#dialog-modal-alerts").resizable();
    });

它还没有用任何人都可以帮我解决问题吗？

Answer 1

你检查过这个吗？它是默认的可拖动对话框和可调整大小的

http://jqueryui.com/dialog/#modal

它是关于strTitle尝试删除它并添加'Title'或任何东西并关闭（数字）确保number和strTitle作为有效变量存在。

我创建了这个例子，我工作正常：

    <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
          });
      });

Answer 2

我最好的猜测是，你的一个函数中有一些你没有向我们展示的东西，可能是一个语法错误，使它无法完成代码。我这样说是因为我可以成功执行你的代码段并实现所需的行为。也许我的全部pastebin会有所帮助。

请注意，单独调用

$("#dialog-modal-alerts").draggable();

预计会起作用，因为这是一个记录在案的jquery ui方法。您可以将任何项目标记为可拖动，无论它是否为模态对话框，这就是您所做的。

另一方面，

$("#dialog-modal-alerts").resizable();

预计不起作用，因为可调整大小不是它自己的功能。

jquery对话框可拖动和可调整大小

2 个答案: