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?

VF page :
<apex:page controller="accountList">
    <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"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery, '/js/jquery-1.7.2.min.js')}"  />
    <script>
        j$ = jQuery.noConflict();
        j$(document).ready(function() {
             
        });
    function myFunction(id1){
    alert(id1);
    accountList.fetchaccount(id1);
    }
    </script>

<body>
<apex:form id="theForm" > 
<apex:pageblock id="thePageBlock" >
    <apex:pageblocksection id="thePageBlocksection"  >
 
        <apex:pageblocktable value="{!listAccount}" var="acc" id="theTable" >
            <apex:column headerValue="Account Name"  >
            <a href="/{!acc.Id}" id="{!acc.Id}" 
               onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" 
               onfocus="myFunction('{!acc.id}');"
               onmouseout="LookupHoverDetail.getHover('{!acc.Id}').hide();" 
               onmouseover="myFunction('{!acc.id}');">
                {!acc.Name}</a>
             </apex:column> 
        </apex:pageblocktable>
           </apex:pageblocksection>
       
    <apex:pageblocksection >
        <apex:pageblocktable value="{!accountDetail}" var="acc" id="theTable2" rendered="(accountDetail.size!=0)">
            <apex:column value="{!acc.Name}">
             </apex:column> 
             <apex:column value="{!acc.phone}">
             </apex:column>
        </apex:pageblocktable>
      </apex:pageblocksection>
           
     
</apex:pageblock>         
</apex:form> 
</body>    
</apex:page>

Apex class :
public class accountList{

    public String getA() {
        return null;
    }


    public accountList() {
                 listAccount = [select id,name,phone from account limit 10];
          listContact = [select name from contact limit 10];
    }

    public list<account> listAccount{get;set;}
    public list<contact> listContact{get; set;}
    public list<account> accountDetail{get;set;}

    public pagereference list1()
    {
        listAccount = [select name,phone from account limit 10];
        listContact = [select name from contact limit 10];
    return null;
    } 

      public  void fetchAccount(string id1)
    {
          system.debug('id1' + id1); 
       
         accountDetail = [select name,phone from account where id=:id1];
    
    }
    
}

here alert is working but i want that when u put cusror on account name then other pageblock  table should display that account record details .

page : 

<apex:page controller="accountlist">
    <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"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery, '/js/jquery-1.7.2.min.js')}"  />
    
    <script>
        j$ = jQuery.noConflict();
           j$(document).ready(function (){
            j$("#select1").click(function() {
              val xyz = document.getElementById("{!$Component.theForm.thePageBlock.thePageBlocksection.theTable}").val(); 
            alert(xyz);
               });
            });
     
    </script>

<body>

<apex:form id="theForm" > 
<apex:pageblock  id="thePageBlock" >
    <apex:pageblocksection  id="thePageBlocksection" >
 
        <apex:pageblocktable value ="{!listAccount}" var="acc" id="theTable" >
            <apex:column headerValue="Account Name"
               value="{!acc.Name}" id="select1">
             </apex:column> 
        </apex:pageblocktable>
        
   <apex:dataList value="{!accountDetail}" var="acc" id="accountdetails1" rendered="(!listaccount.size!=0)" >
       <apex:outputText value="{!acc.name}" />
       <apex:outputText value="{!acc.phone}"/> 
         </apex:dataList>
       
    </apex:pageblocksection>
    </apex:pageblock>
    </apex:form>
    
</body>    
</apex:page>

apex class 

public class accountList{

    public String getA() {
        return null;
    }


    public accountList() {
                 listAccount = [select id,name,phone from account limit 10];
          listContact = [select name from contact limit 10];
    }

    public list<account> listAccount{get;set;}
    public list<contact> listContact{get; set;}
    public list<account> accountDetail{get;set;}

    public pagereference list1()
    {
        listAccount = [select name,phone from account limit 10];
        listContact = [select name from contact limit 10];
    return null;
    } 
    @RemoteAction
      public static void fetchAccount(string id1)
    {
          system.debug('id1' + id1); 
       
        list<account> accountDetail = [select name,phone from account where name=:id1];
    
    }
    
}

page : 

<apex:page controller="accountlist">
    <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"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery, '/js/jquery-1.7.2.min.js')}"  />
    
    <script>
        j$ = jQuery.noConflict();
           j$(document).ready(function (){
            j$("#select1").click(function() {
              val xyz = document.getElementById("{!$Component.theForm.thePageBlock.thePageBlocksection.theTable}").val(); 
            alert(xyz);
               });
            });
     
    </script>

<body>

<apex:form id="theForm" > 
<apex:pageblock  id="thePageBlock" >
    <apex:pageblocksection  id="thePageBlocksection" >
 
        <apex:pageblocktable value ="{!listAccount}" var="acc" id="theTable" >
            <apex:column headerValue="Account Name"
               value="{!acc.Name}" id="select1">
             </apex:column> 
        </apex:pageblocktable>
        
   <apex:dataList value="{!accountDetail}" var="acc" id="accountdetails1" rendered="(!listaccount.size!=0)" >
       <apex:outputText value="{!acc.name}" />
       <apex:outputText value="{!acc.phone}"/> 
         </apex:dataList>
       
    </apex:pageblocksection>
    </apex:pageblock>
    </apex:form>
    
</body>    
</apex:page>

apex class 

public class accountList{

    public String getA() {
        return null;
    }


    public accountList() {
                 listAccount = [select id,name,phone from account limit 10];
          listContact = [select name from contact limit 10];
    }

    public list<account> listAccount{get;set;}
    public list<contact> listContact{get; set;}
    public list<account> accountDetail{get;set;}

    public pagereference list1()
    {
        listAccount = [select name,phone from account limit 10];
        listContact = [select name from contact limit 10];
    return null;
    } 
    @RemoteAction
      public static void fetchAccount(string id1)
    {
          system.debug('id1' + id1); 
       
        list<account> accountDetail = [select name,phone from account where name=:id1];
    
    }
    
}

VF page :
<apex:page controller="accountList">
    <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"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery, '/js/jquery-1.7.2.min.js')}"  />
    <script>
        j$ = jQuery.noConflict();
        j$(document).ready(function() {
             
        });
    function myFunction(id1){
    alert(id1);
    accountList.fetchaccount(id1);
    }
    </script>

<body>
<apex:form id="theForm" > 
<apex:pageblock id="thePageBlock" >
    <apex:pageblocksection id="thePageBlocksection"  >
 
        <apex:pageblocktable value="{!listAccount}" var="acc" id="theTable" >
            <apex:column headerValue="Account Name"  >
            <a href="/{!acc.Id}" id="{!acc.Id}" 
               onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" 
               onfocus="myFunction('{!acc.id}');"
               onmouseout="LookupHoverDetail.getHover('{!acc.Id}').hide();" 
               onmouseover="myFunction('{!acc.id}');">
                {!acc.Name}</a>
             </apex:column> 
        </apex:pageblocktable>
           </apex:pageblocksection>
       
    <apex:pageblocksection >
        <apex:pageblocktable value="{!accountDetail}" var="acc" id="theTable2" rendered="(accountDetail.size!=0)">
            <apex:column value="{!acc.Name}">
             </apex:column> 
             <apex:column value="{!acc.phone}">
             </apex:column>
        </apex:pageblocktable>
      </apex:pageblocksection>
           
     
</apex:pageblock>         
</apex:form> 
</body>    
</apex:page>

Apex class :
public class accountList{

    public String getA() {
        return null;
    }


    public accountList() {
                 listAccount = [select id,name,phone from account limit 10];
          listContact = [select name from contact limit 10];
    }

    public list<account> listAccount{get;set;}
    public list<contact> listContact{get; set;}
    public list<account> accountDetail{get;set;}

    public pagereference list1()
    {
        listAccount = [select name,phone from account limit 10];
        listContact = [select name from contact limit 10];
    return null;
    } 

      public  void fetchAccount(string id1)
    {
          system.debug('id1' + id1); 
       
         accountDetail = [select name,phone from account where id=:id1];
    
    }
    
}

here alert is working but i want that when u put cusror on account name then other pageblock  table should display that account record details .

page : 

<apex:page controller="accountlist">
    <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"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery, '/js/jquery-1.7.2.min.js')}"  />
    
    <script>
        j$ = jQuery.noConflict();
           j$(document).ready(function (){
            j$("#select1").click(function() {
              val xyz = document.getElementById("{!$Component.theForm.thePageBlock.thePageBlocksection.theTable}").val(); 
            alert(xyz);
               });
            });
     
    </script>

<body>

<apex:form id="theForm" > 
<apex:pageblock  id="thePageBlock" >
    <apex:pageblocksection  id="thePageBlocksection" >
 
        <apex:pageblocktable value ="{!listAccount}" var="acc" id="theTable" >
            <apex:column headerValue="Account Name"
               value="{!acc.Name}" id="select1">
             </apex:column> 
        </apex:pageblocktable>
        
   <apex:dataList value="{!accountDetail}" var="acc" id="accountdetails1" rendered="(!listaccount.size!=0)" >
       <apex:outputText value="{!acc.name}" />
       <apex:outputText value="{!acc.phone}"/> 
         </apex:dataList>
       
    </apex:pageblocksection>
    </apex:pageblock>
    </apex:form>
    
</body>    
</apex:page>

apex class 

public class accountList{

    public String getA() {
        return null;
    }


    public accountList() {
                 listAccount = [select id,name,phone from account limit 10];
          listContact = [select name from contact limit 10];
    }

    public list<account> listAccount{get;set;}
    public list<contact> listContact{get; set;}
    public list<account> accountDetail{get;set;}

    public pagereference list1()
    {
        listAccount = [select name,phone from account limit 10];
        listContact = [select name from contact limit 10];
    return null;
    } 
    @RemoteAction
      public static void fetchAccount(string id1)
    {
          system.debug('id1' + id1); 
       
        list<account> accountDetail = [select name,phone from account where name=:id1];
    
    }
    
}

i have built a vf page:-
<apex:page controller="TheController">

    <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>

        $(document).ready(function(){

            $(document.getElementById("{!$Component.theForm.thePageBlock.theTable}")).find("tbody").sortable();

        });

    </script>

    <apex:form id="theForm">

        <apex:pageBlock id="thePageBlock" >

            <apex:pageBlockTable value="{!accounts}" var="account" id="theTable">

                    <apex:column value="{!account.Name}"/>

                    <apex:column value="{!account.AccountNumber}"/>

                    <apex:column value="{!account.OwnerId}"/>

                    <apex:column value="{!account.Phone}"/>

                    <apex:column value="{!account.Fax}"/>

            </apex:pageBlockTable>

        </apex:pageBlock>       
    </apex:form>

</apex:page>

controller:-

public with sharing class TheController {

    public List<Account> getAccounts()

    {

        return [Select Id, Name, AccountNumber, OwnerId, Phone, Fax From Account limit 10];

    }

}
hi, this code working good.
but it is working in one section (means i can set the record in any place among all records), if i want to drag a single record from all records and want to drop it in a other page block section(like in list1 i want to display all records , then if i drag a single record and drop it in another pageblock section named list2) .
how this will be possible?

please give me solution..

I'm trying to implement drag and drop via JQuery from a DataTable or Page block Table.

 

I can make the hole table drag but can't get the specific rows to drag. What can I do to get the individual records to drag from the list?

 

I want to assign records to a parent record.

 

Thanks,

Tom