Unable to create multiple draggables

Unable to create multiple draggables

I am attempting to do create multiple dragging floating search results.  Here is the flow:
 
1) Perform a search, a result is created.
2) Click the top right to "unpin" the result and make it draggable.
3) Perform a second search which creates a new result.
 
At this point, the click event on result #2 isn't working.  Only after you have closed result #1 (by performing its click event) does the click event on #2 work.  I'm using .one() instead of .click() although I've tried them both (and tried unbinding).  Here is a sample, just doesn't work.
 
  1. <!doctype html>
    <html>
    <head>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <title>Something</title>
     <!-- <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> -->
     <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="./js/jquery-ui-1.8.4.custom.min.js"></script>
     <style>
     body {
      margin: 20px;
      padding: 0;
     }
     
     #content {
      display: none;
      float: right;
      margin-right: 30px;
      width: 320px;
     }
     
     .site-name {
      margin: auto;
      width: 100%;
      text-align: center;
     }
     
     #search {
      width: 300px;
     }
     
     .centered {
      position: relative;
      margin: auto;
     }
     
     .lefted {
      position: relative;
     }
     
     .searchbox {
      background: blue;
      height: 40px;
      width: 300px;
      margin: auto;
     }
     
     input[type='search'] {
      font-size: 25px;
      height: 36px;
      margin-left: 2px;
      margin-right: 2px;
      margin-top: 2px;
      margin-bottom: 2px;
      width: 296px;
      
      -webkit-box-shadow: 0px 0px 5px #007eff;
      -moz-box-shadow: 0px 0px 5px #007eff;
      box-shadow: 0px 0px 5px #007eff;

























































  2.  }
     
     .results {
      background: yellow;
      width: 320px;
     }
     
     .dragarea {
      background: purple;
      float: left;
      width: 94%;
     }
     
     .dragarea.unpinned {
      cursor: move;
     }
     
     .pinner {
      background:green;
      float:right;
      cursor:pointer;
      width: 6%;
     }
     
     .pinned {
      
     }
     


























  3.  
     .unpinned {
      
     }
     
     </style>
     <script type="text/javascript">
     $(document).ready(function() {
      // Set up that it is not shifted.
      $shifted = false;
      
      // Keep track the number of floaters.
      $numResults = 0;
      
      // Set up the result template.
      $resultTemplate = '<div id="results_{{num}}" class="results pinned">'
       + '<div id="toolbar_{{num}}" class="toolbar">'
       + '<div id="dragarea_{{num}}" class="dragarea pinned">&nbsp;</div>'
       + '<div id="pinner_{{num}}" class="pinner">[,]</div>'
       + '</div>'
       + '<div style="clear:both;">something</div>'
       + '</div>';
     
      jQuery.fn.floater = function() {
       // Move the object.
       if ($('body #floating').length == 0) {
        $('body').append('<div id="floating" style="position:absolute;"></div>');

























  4.     $offset = this.offset();
        $('#floating').css('left',$offset.left);
        $('#floating').css('top',$offset.top);
       }
       
       var resultsHTML = $(this.parent()).html();
       this.remove();
       $('#floating').append(resultsHTML);
       
       var $thisfloater = $('#floating').find('#results_' + $numResults);
       $thisfloater.data('num', $numResults);
       $thisfloater.draggable({ handle: '#dragarea_' + $numResults });
       $thisfloater.removeClass('pinned');
       $thisfloater.addClass('unpinned');
       $thisfloater.find('*').removeClass('pinned');
       $thisfloater.find('*').addClass('unpinned');
       
       // Append the click event.
       var $pinner = $('#floating').find('#pinner_' + $numResults);
       $pinner.html('x');
       $pinner.one('click', function() {
        $($thisfloater).remove();
       });
      };
      
      String.prototype.replaceAll = function(pcFrom, pcTo){
       var i = this.indexOf(pcFrom);
       var c = this;
       
       while (i > -1){
        c = c.replace(pcFrom, pcTo);
        i = c.indexOf(pcFrom);
       }
       return c;
      }
     
      // When a search is performed.
      $('form').submit(function() {
       // Results goes up 1.
       $numResults++;
      
       $content = $('#content');
       
       if($shifted == false) {
        $('#search').switchClass('centered', 'lefted', 1000);
        
        $content.html($resultTemplate.replaceAll('{{num}}',$numResults));
        
        // Fade in the content.
        setTimeout(function() {
         $content.fadeIn();
        }, 1000);
          
        $shifted = true;
       } else {
        $content.html($resultTemplate.replaceAll('{{num}}',$numResults));
        $content.fadeIn();
       }
       
       // Create a click event for this particular result set.
       $thispinner = $content.find('#pinner_' + $numResults);
       $thispinner.one('click', function() {
        $content.find('#results_' + $numResults).floater();
       });
          
       return false;
      });  
     })
     </script>
    </head>
    <body>
    <section id="search" class="centered">
     <header class="site-name">
      <h1>site name</h1>
     </header>
     <div class="searchbox">
     <form>
      <input type="search" placeholder="what about?" name="q" />
     </form>
     <div>
    </section>
    <section id="content"></section>
    </body>
    </html>