title: jQuery UI sortable with table and modal pop ups
body: <p><strong>One</strong>: I need a table with sortable rows (see jqueryui.com). Typically, the examples give you list items but it is very possible to do this with table rows. Here's my homework <a href="http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/" rel="nofollow noreferrer">http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/</a> and his jsfiddle: <a href="http://jsfiddle.net/bgrins/tzYbU/" rel="nofollow noreferrer">http://jsfiddle.net/bgrins/tzYbU/</a> He basically explains the fixes that go along with making table rows sortable.</p>
  
  <p><strong>Two</strong>: I need these sortable table rows to have a modal pop up on hover. It seems I can only have one or the other. Either the sortable rows move, but the pop up doesn't work (<a href="http://jsfiddle.net/anschwem/gAmnQ/2/" rel="nofollow noreferrer">http://jsfiddle.net/anschwem/gAmnQ/2/</a> it's sorting/dragging on my end but not the fiddle) <strong>or</strong> the modal pop ups work and and sort, but it's list items. (<a href="http://jsfiddle.net/anschwem/gAmnQ/1/" rel="nofollow noreferrer">http://jsfiddle.net/anschwem/gAmnQ/1/</a>). Then there's the strange occurrence where a row is kicked out of the table and only it's hover works (<a href="http://jsfiddle.net/anschwem/gAmnQ/2/" rel="nofollow noreferrer">http://jsfiddle.net/anschwem/gAmnQ/2/</a>). Anyways, I need rows due to correct spacing and the fact that I will also need to dynamically create new rows. Any ideas? </p>
  
  <p><strong>Here's the HTML for my sortable table:</strong></p>
  
  <pre><code>&lt;table class="table_177" id="sortable2" class="connectedSortable inputboxes"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Vessel Name&lt;/th&gt;
      &lt;th&gt;Hull/IMO No.&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;  
    &lt;tr&gt;
      &lt;a class="productsModal1" style="text-decoration:none"&gt;
      &lt;td class="ui-state-highlight" style="border-right:none"&gt;SS Mary Mae&lt;/td&gt;
      &lt;td class="ui-state-highlight" style="border-left:none"&gt;12345&lt;/td&gt;&lt;/a&gt;
    &lt;/tr&gt;      
    &lt;tr&gt;
      &lt;a class="productsModal1" style="text-decoration:none"&gt;
      &lt;td class="ui-state-highlight" style="border-right:none"&gt;EMS 234&lt;/td&gt;
      &lt;td class="ui-state-highlight" style="border-left:none"&gt;12346&lt;/td&gt;&lt;/a&gt;
    &lt;/tr&gt; 
  &lt;/table&gt;
  </code></pre>
  
  <p>The HTML and CSS for my hidden modals: </p>
  
  <pre><code>&lt;style&gt;
  div.productsModal1
  {
      display:none;
      position:absolute;
      border:solid 1px black;
      padding:8px;
      background-color:white;
  }
  a.productsModal1:hover + div.productsModal1
  {
      display:block;
  /*  animation:fade-out .5s 1;
      animation-transition-property: opacity;*/
  }
  div.productsModal1:hover
  {
      display:block;
  /*  animation:fade-out .5s 1;
      animation-transition-property: opacity;*/
  }
  &lt;/style&gt;
      &lt;div class="productsModal1" style="top: 230px; left: 320px; z-index:9999" &gt;
    &lt;table id="menu1"&gt;
      &lt;tr&gt;
        &lt;th&gt;Vessel Name&lt;/th&gt;
        &lt;th&gt;Vessel Type&lt;/th&gt;
        &lt;th&gt;Hull/IMO No.&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;SS Mary Mae&lt;/td&gt;
        &lt;td&gt;Barge&lt;/td&gt;
        &lt;td&gt;12345&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="productsModal1" style="top: 230px; left: 320px; z-index:9999" &gt;
    &lt;table id="menu1"&gt;
      &lt;tr&gt;
        &lt;th&gt;Vessel Name&lt;/th&gt;
        &lt;th&gt;Vessel Type&lt;/th&gt;
        &lt;th&gt;Hull/IMO No.&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;EMS 234&lt;/td&gt;
        &lt;td&gt;Barge&lt;/td&gt;
        &lt;td&gt;67891&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>AND my code:</strong></p>
  
  <pre><code>$(window).load(function(){
  // Return a helper with preserved width of cells
  var fixHelperModified = function(e, tr) {
      var $originals = tr.children();
      var $helper = tr.clone();
      $helper.children().each(function(index)
      {
        $(this).width($originals.eq(index).width())
      });
      return $helper;
  };
      $("#sortable2 tbody").sortable({helper: fixHelperModified}).disableSelection();
  });//]]&gt; 
  </code></pre>