Creating a draggable div using jquery

Creating a draggable div using jquery

Sorry, really new at this.  So I used the jQuery UI to create a draggable div, like so:

  2. <div id="draggable" class="ui-widget-content">
  3.   <p>Drag me around</p>
  4. </div>
I've also implemented the jQuery UI button, and I want the button, when clicked, to create a duplicate div, like so:

  2.   $(function() {
  3.     $( "input[type=submit], a, button" )
  4.       .button()
  5.       .click(function( ) {
  6.         $( "<div id='draggable' class='ui-widget-content'><p>Drag me around</p></div>" ).appendTo( "body" );
  7.       });
  8.   });
It creates the div like I want, however it's not draggable.  When I inspect the element, the original div has a  bunch of other properties like " ui-widget-content ui-draggable ui-draggable-handle". Does anyone know why that is? And what can I do to get the new div to behave like the original?