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 need some help with a VF page:

I need to create a page that list Accounts with a field name Level (NIVEL__c) with 3 options (level1, level2 and level3). The lists let you use drag and drop that can change the account to another level dragging the account name to another list (this with jqueryUI). When I press a button “Save”, its update the value of the Level field in each account where it left (example.: if an account with level1 is in the level3 field, its update the Level value to level3). In that way when I enter to the account I can view that change, and if I re-enter to the VF page I can see the lists with the new order.

I’m totally newbie at VF, apex and jQuieryUI so if you propose to recode all from scratch (with help) I will do it.

But here is my code:
 

public class Controler {

public List<Account> getLevel1Accounts() {
    List<Account> results = [SELECT Name, Id, NIVEL__c FROM Account WHERE NIVEL__c='Nivel 1'];
    return results;
}
public List<Account> getLevel2Accounts() {
    List<Account> results = [SELECT Name, Id, NIVEL__c FROM Account WHERE NIVEL__c='Nivel 2'];
    return results;
}
public List<Account> getLevel3Accounts() {
    List<Account> results = [SELECT Name, Id, NIVEL__c FROM Account WHERE NIVEL__c='Nivel 3'];
    return results;
}}

and
 

<apex:page controller="Controler">
    <apex:stylesheet value="{!URLFOR($Resource.jQueryUI, '/jquery-ui-1.11.4/jquery-ui.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Ejemplo, 'ejemplo.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/jquery-ui-1.11.4/external/jquery/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/jquery-ui-1.11.4/jquery-ui.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Ejemplo, 'ejemplo.js')}"/>


<apex:form>

<ul id="sortable1" class="connectedSortable">
    <h3>Level 1</h3>
<apex:repeat value="{!Level1Accounts}" var="level1">
<li>"{!level1.Name}"</li>
</apex:repeat>
</ul>

<ul id="sortable2" class="connectedSortable">  
        <h3>Level 2</h3>
<apex:repeat value="{!Level2Accounts}" var="level2">
<li>"{!level2.Name}"</li>  
</apex:repeat>
</ul>

<ul id="sortable3" class="connectedSortable"> 
        <h3>Level 3</h3>
<apex:repeat value="{!Level3Accounts}" var="level3">
<li>"{!level3.Name}"</li>    
</apex:repeat>
</ul>




</apex:form>


</apex:page>

JS
 

$(function() {
    $( "#sortable1, #sortable2, #sortable3" ).sortable({
       ".connectedSortable"
    }).disableSelection();
  });

So you can view 3 lists separated by level (with no css style, I don’t know why) that you can drag and drop the different items in other lists.

Im stuck with the save button part, I don’t know how jquery can interact with the controller to update the new value or simply how i can code it.