Why doesn't my dialog drag or resize?

I am unable to drag or resize a dialog box. I have downloaded all dependencies and tried various settings in options, but still no joy:

<script type="text/javascript">
function dialog(){
$("#paragraph").dialog({
    title: 'This is a title',
    width: 300,
    height: 50,
    modal: true,
    draggable:开发者_开发知识库 true,
    autoOpen: false,
    buttons: {
            'Remove': function () { // remove what you want to remove 
                // do something here 
                alert("this is a test alert!");
                $(this).dialog('close');
                $("#flex1").flexReload();
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        }
});
$("#paragraph").dialog("open");
};
</script>

<p id="paragraph">This is some paragraph text</p>

---

Downloads of the jQuery UI library are customizable. If your copy doesn't include the 'Draggable' and 'Resizable' interactions, your dialog will not be draggable or resizable.

---

Well maybe add resizable option and set it to true.

Also the dialog is draggable by the title bar not the entire dialog body.

Any good?