javascript - jquery dialog draggable and resizable - Stack Overflow

admin管理员组

文章数量:1401134

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?

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?

• javascript
• jquery

Share Improve this question Follow edited Aug 20, 2013 at 20:12 David Berger 12.8k66 gold badges4141 silver badges5353 bronze badges asked Aug 20, 2013 at 19:56 user2060766user2060766 6

• What do you expect how it should work? – benestar Commented Aug 20, 2013 at 19:58
• I want to dragg my div and change it size. – user2060766 Commented Aug 20, 2013 at 19:59
• By default, the dialog is both: jsfiddle/7RtL7 – j08691 Commented Aug 20, 2013 at 20:00
• @j08691 You are rigth but it doesn't work by default and I don't know why – user2060766 Commented Aug 20, 2013 at 20:06
• 1 Have you included jquery UI? That is where all of these things e from. – James Montagne Commented Aug 20, 2013 at 20:07

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

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

http://jqueryui./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./ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery./jquery-1.9.1.js"></script>
  <script src="http://code.jquery./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
          });
      });

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.

本文标签： javascriptjquery dialog draggable and resizableStack Overflow