Problem making overlay draggable

Question

I have created a script that upon clicking a button displays an overlay which loads an html table by ajax. The problem I'm having is with making the overlay draggable. The first time I click on the button the overlay is displayed and is draggable. However when I close the overlay and click the button again the overlay is displayed but is not draggable. Firebug's console reports overlay.draggable is not a function (the second time).

$("#control").click(function() {
       if ($('div.ov').length ==0){
          var height= 400;
          var width = 800;
          var left = (screen.width/2) - (width/2);
          var top =  (screen.height/2) - (height/2);

          $.ajax({
             type : 'GET',
             url:'edit.php',
             data: {},
             dataType: 'html',
             success: function(data) {
                var overlay = $("<div class='ov'></div>");
                overlay.css({'left':left, 'top':top, 'height':height, 'width':width})
                .html(data).appendTo("body");
                overlay.draggable({handle:'th'});
                var closebtn = overlay.find('#close');
                closebtn.click(function() {
                   $(this).parents('div.ov').remove();
                });
             }
          });
       }
    });