Vf page
<apex:page controller="accountList">
    
    <apex:includeScript value="{!URLFOR($Resource.Jquery, '/js/jquery-1.7.2.min.js')}"  />
    <apex:stylesheet value="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
    <apex:includeScript value="//code.jquery.com/jquery-1.10.2.js"/>
    <apex:includeScript value="//code.jquery.com/ui/1.11.2/jquery-ui.js"/>

<script type="text/javascript">
    
    function myFunction(id1) {
        rerenderTable(id1);
    }
    function myFunction1(id2){
           rerenderTable1(id2);
               
    }
    
    j$ = jQuery.noConflict();
    j$(document).ready(function(){
   
            alert("Ok");
            j$(document.getElementById("{!$Component.theForm.thePageBlock.mainTable.selectTable.DynamicTable}")).find("tbody").addClass('connectedSortable');
            j$(document.getElementById("{!$Component.theForm.thePageBlock.mainTable.selectTable.DynamicTable1}")).find("tbody").addClass('connectedSortable');
            j$(document.getElementById("{!$Component.theForm.thePageBlock.mainTable.selectTable.DynamicTable}")).find("tbody")
                .sortable({
                    connectWith: ".connectedSortable",
                    items: "> tr",
                    appendTo: "parent",
                    helper: "clone",
                    cursor: "move",
                    zIndex: 1000                 
                });

            j$(document.getElementById("{!$Component.theForm.thePageBlock.mainTable.selectTable.DynamicTable1}")).find("tbody")
                .sortable({                  
                    connectWith: ".connectedSortable",
                    items: "> tr",
                    appendTo: "parent",
                    helper: "clone",
                    cursor: "move",
                    zIndex: 1000
                });  
                });
                     
  
   
</script>

<apex:form id="theForm" > 
<apex:pageblock id="thePageBlock"  >
       <apex:pageBlockSection columns="3" id="mainTable">
         
            <apex:pageblocktable value="{!listAccount}" var="acc" id="theTable"  >
                <apex:column headerValue="Account Name"  value="{!acc.Name}" onmouseover="myFunction('{!acc.id}');" id="select1" />               
            </apex:pageblocktable>     
            
           <apex:pageBlockSection columns="1" id="selectTable"  >     
                <apex:pageblocktable value="{!accountDetail}" var="acc" id="DynamicTable" > 
                   <apex:column title="Account Name"  value="{!acc.Name}"/>
                   <apex:column value="{!acc.phone}"/>        
               </apex:pageblocktable>
      
               <apex:pageblocktable value="{!contactDetail}" var="con" id="DynamicTable1" >               
                   <apex:column value="{!con.Name}" id="selectedRow"/> 
                   <apex:column value="{!con.phone}"/>       
                </apex:pageblocktable> 
                      
           </apex:pageBlockSection>
            
           <apex:pageblocktable value="{!listContact}" var="con" id="theTable11"  >
                <apex:column headerValue="Contact Name"  value="{!con.name}" onmouseover="myFunction1('{!con.id}');" />               
           </apex:pageblocktable> 
      </apex:pageBlockSection>
    
      <apex:actionFunction name="rerenderTable" reRender="DynamicTable" action="{!fetchAccount}"  > 
            <apex:param name="id1" value="" />
      </apex:actionFunction>
    
      <apex:actionFunction name="rerenderTable1" reRender="DynamicTable1" action="{!fetchContact}" > 
            <apex:param name="id2" value="" />
      </apex:actionFunction>
    
     
</apex:pageblock>         
</apex:form> 
</apex:page>

Apex class

public class accountList{

    public list<account> listAccount{get;set;}
    public list<contact> listContact{get; set;}
    public list<account> accountDetail{get;set;}
    public list<contact> contactDetail{get;set;}  
    public String val{get;set;}
    
    public accountList() {
          listAccount = [select id,name,phone from account limit 10];
          listContact = [select name,phone from contact limit 10];
    }

      public  void fetchAccount()
    {
           system.debug('hi');
           val = Apexpages.currentPage().getParameters().get('id1');
           system.debug(val);
           accountDetail = [select name,phone from account where id=:val];
    
    }
    
        public  void fetchContact()
    {
           system.debug('hi');        
        
           val = Apexpages.currentPage().getParameters().get('id2');
           system.debug(val);
           contactDetail = [select name,phone from contact where id=:val];
    
    }
    
    
}


I want to move record middle column from one table to other table?