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.