jquery dialog draggable and resizable

Question

I want to make my div draggable and resizable using jquery. Here is a simple div:

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

and this is how I use 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?

Answer 1

did you check this? it's by default draggable dialog and resizable

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.

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

Answer 2

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 pastebin will 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.

On the other hand,

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

is not expected to work, since resizable is not it's own function.