title: jQuery draggable items lose their draggability after being swapped (with jsfiddle example)
body: <p>I have two li elements which are jQuery draggable.  When I drag and drop box 'one' over box 'two', they get swapped. So far so good. (The delay fixes another problem described <a href="https://stackoverflow.com/questions/4588229/swapping-two-jquery-draggable-list-items-not-working-properly-with-jsfiddle-exa/4589015#4589015">here</a>.) However the elements now are not draggable anymore, even after resetting their draggable option. </p>
  
  <p>Any ideas how to fix this? <a href="http://jsfiddle.net/XkUDv" rel="nofollow noreferrer">full working jsfiddle here</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
      &lt;script type="text/javascript" src="includes/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          jQuery.fn.swapWith = function(to) {
              return this.each(function() {
                  var copy_to = $(to).clone(true);
                  var copy_from = $(this).clone(true);
                  $(to).replaceWith(copy_from);
                  $(this).replaceWith(copy_to);
              });
          };
  
  
  
          $(document).ready(function() {
  
              options = { revert: true};
  
              $("li").draggable(options);
  
              $('#wrapper').droppable({
                  drop: function(event, ui) {
                  window.setTimeout("Swap()", 600);
                  }
              });
          });
  
          function Swap() {
              $('#one').swapWith($('#two'));
  
              //trying to fix problem where elements can't be dragged anymore
              $("li").draggable("destroy"); 
              $("li").draggable(options);
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form&gt;
      &lt;ul id="wrapper"&gt;
          &lt;li id='one'&gt;
              &lt;div style="width: 100px; height: 100px; border: 1px solid green"&gt;
                  one&lt;br /&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li id='two'&gt;
              &lt;div style="width: 110px; height: 110px; border: 1px solid red"&gt;
                  two&lt;br /&gt;&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;br /&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>