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?