title: jQuery UI - Rename Sortable Tabs on Double Click
body: <p>I am using jQuery UI Tabs with Sortable, how can I rename on Double Click? Please help me out!</p>
  
  <hr>
  
  <h2><a href="http://jsfiddle.net/ckpwdojt/1/">FIDDLE</a></h2>
  
  <hr>
  
  <blockquote>
    <p><strong>HTML</strong></p>
  </blockquote>
  
  <pre><code>&lt;div id="tabs"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabs-1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabs-1"&gt;
      &lt;p&gt;Tab Content 1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="tabs-2"&gt;
      &lt;p&gt;Tab Content 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="tabs-3"&gt;
      &lt;p&gt;Tab Content 3&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>jQuery</strong></p>
  </blockquote>
  
  <pre><code>$(function() {
      var tabs = $( "#tabs" ).tabs();
      tabs.find( ".ui-tabs-nav" ).sortable({
          axis: "x",
          stop: function() {
              tabs.tabs( "refresh" );
          }
      });
  });
  </code></pre>