title: Drag and drop table row from one tabs table to another tabs table - Jquery
body: <p>I have two tabs(built using boostrap) and each tab has its own table. </p>
  
  <p>I need to drag table row from one tab and drop into another tabs table. While dragging i want to open the tab under cursor before dropping into table. Any help appreciated.</p>
  
  <p>This is my HTML code  </p>
  
  <pre><code>&lt;div class="tabbable" &gt; 
    &lt;ul class="nav nav-tabs" id="my-tabs"&gt;  
    &lt;li class="active"&gt;&lt;a  href="#tab1" data-toggle="tab"&gt; Tab1 &lt;/a&gt;&lt;/li&gt;  
    &lt;li class=""&gt;&lt;a href="#tab2" data-toggle="tab"&gt; Tab2 &lt;/a&gt;&lt;/li&gt;  
   &lt;/ul&gt;
  &lt;/div&gt;  
  
  &lt;div class="tab-content"&gt;
   &lt;div class="tab-pane active" id="tab1"&gt;
     &lt;table id='table-draggable1'&gt;  
     &lt;thead&gt;  
      &lt;th&gt;col1&lt;/th&gt;  
      &lt;th&gt;col2&lt;/th&gt;  
      &lt;th&gt;col3&lt;/th&gt;  
      &lt;th&gt;col4&lt;/th&gt;  
    &lt;/thead&gt;  
   &lt;tbody&gt;  
     &lt;tr&gt;   
      &lt;td&gt;256&lt;/td&gt;                                                                                         
      &lt;td&gt;668&lt;/td&gt;                                                              
      &lt;td&gt;100.95&lt;/td&gt;  
      &lt;td&gt;1.82&lt;/td&gt;                                                                  
    &lt;/tr&gt;  
    &lt;tr&gt;  
     &lt;td&gt;256&lt;/td&gt;                                                                                         
     &lt;td&gt;668&lt;/td&gt;                                                              
     &lt;td&gt;100.95&lt;/td&gt; 
     &lt;td&gt;1.82&lt;/td&gt;                                                                
    &lt;/tr&gt;  
   &lt;/tbody&gt; 
   &lt;/table&gt; 
   &lt;div class="tab-pane" id="tab2"&gt;
     &lt;table id='table-draggable2'&gt;  
     &lt;thead&gt;  
      &lt;th&gt;col1&lt;/th&gt;  
      &lt;th&gt;col2&lt;/th&gt;  
      &lt;th&gt;col3&lt;/th&gt;  
      &lt;th&gt;col4&lt;/th&gt;  
    &lt;/thead&gt;  
   &lt;tbody&gt;  
     &lt;tr&gt;   
      &lt;td&gt;256&lt;/td&gt;                                                                                         
      &lt;td&gt;668&lt;/td&gt;                                                              
      &lt;td&gt;100.95&lt;/td&gt;  
      &lt;td&gt;1.82&lt;/td&gt;                                                                  
    &lt;/tr&gt;  
    &lt;tr&gt;  
     &lt;td&gt;256&lt;/td&gt;                                                                                         
     &lt;td&gt;668&lt;/td&gt;                                                              
     &lt;td&gt;100.95&lt;/td&gt; 
     &lt;td&gt;1.82&lt;/td&gt;                                                                
    &lt;/tr&gt;  
   &lt;/tbody&gt; 
   &lt;/table&gt; 
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my JS code</p>
  
  <pre><code>$('.table-draggable1 tbody').draggable();  
  
  $('#my-tabs &gt; li').droppable({  
    over:function(event, ui){            
    console.log(event.target);              
   },
    drop:function(event,ui){            
   }    
  });  
  </code></pre>