VISUAL FORCE PAGE

<apex:page id="p" standardController="Account" extensions="allocateticketExt" tabstyle="Ticket_Allocation__c" standardStylesheets="false">
  <apex:sectionHeader title="Allocate Tickets"/>
  <apex:form id="f">
   <script src="http://script.aculo.us/prototype.js" type="text/javascript"></script>
   <script src="http://script.aculo.us/scriptaculous.js" type="text/javascript"></script>
  

    <script language="JavaScript">
    sections = ['Tickets'];
    <apex:repeat value="{!salescontacts}" var="scCS">
    sections.push('{!scCS.id}');
    </apex:repeat>

    function createNewSection(name) {
        var name = $F('sectionName');
        if (name != '') {
            var newDiv = Builder.node('div', {id: 'group' + (sections.length + 1), className: 'section', style: 'display:none;' }, [
                Builder.node('h3', {className: 'handle'}, name)
            ]);

            sections.push(newDiv.id);
            $('page').appendChild(newDiv);
            Effect.Appear(newDiv.id);
            destroyLineItemSortables();
            createLineItemSortables();
            createGroupSortable();
        }
    }

    function createLineItemSortables() {
        for(var i = 0; i < sections.length; i++) {
            Sortable.create(sections[i],{tag:'div',dropOnEmpty: true, containment: sections,only:'lineitem'});
        }
    }

    function destroyLineItemSortables() {
        for(var i = 0; i < sections.length; i++) {
            Sortable.destroy(sections[i]);
        }
    }

    function createGroupSortable() {
        Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
    }

    </script>
<style>
    body, div {
        font-family: Arial, Helvetica;
        font-size: 11px;
    }

    div.section,div#createNew {
        border: 1px solid #CCCCCC;
        margin: 30px 5px;
        padding: 0px 0px 10px 0px;
        background-color: #EFEFEF;
    }
      
    div#createNew input { margin-left: 5px; }

    div#createNew h3, div.section h3{
        font-size: 14px;
        padding: 2px 5px;
        margin: 0 0 10px 0;
        background-color: #CCCCCC;
        display: block;
    }

    div.section h3 {
        cursor: move;
    }

    div.lineitem {
        margin: 3px 10px;
        padding: 2px;
        background-color: #FFFFFF;
        cursor: move;
    }

    h1 {
        margin-bottom: 0;
        font-size: 18px;
    }
</style>
<div id="page">
    <div id="createNew">
        <h3>Add New Sales Contact</h3>
        <input type="text" id="sectionName" size="25" />
        <input type="button" onClick="createNewSection();" value="Create Sales Contact" />
    </div>
    
    <div id="Tickets" class="section">
        <h3 class="handle">Tickets</h3>
        <apex:repeat value="{!ticket}" var="t" id="AllTickets">
         <div id="{!t.id}" class="lineitem">{!t.Product_Full_Name__c}</div>
        </apex:repeat>
    </div>
        
    <apex:repeat value="{!salescontacts}" var="sc" id="Allocations">
    <div id="{!sc.id}" class="section">
        <h3 class="handle">{!sc.Name__c}  ({!sc.Role__c})</h3>
        <apex:repeat value="{!allocated}" var="aoi">
            <script type="text/javascript">
              if({!CONTAINS(sc.id,aoi.Sales_Contact__c)}){
                document.write('<div id="{!aoi.Order_Item__c}" class="lineitem">{!aoi.Order_Item__r.Product_Full_Name__c}</div>');
              }
            </script>
        </apex:repeat>
    </div>
    </apex:repeat>
</div>
<br/><br/>
<p>
 <apex:outputText value="Clicked— {!state}" id="showstate" />
</p>

<apex:outputPanel onclick="methodOneInJavascript(GroupOrder();)" styleClass="btn"> 
  Click Me 
</apex:outputPanel>

<apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate">
   <apex:param name="firstParam" assignTo="{!state}" value="" />
</apex:actionFunction>

<script type="text/javascript">
    // <![CDATA[
    Sortable.create('Tickets',{tag:'div',dropOnEmpty: true, containment: sections,only:'lineitem'});
    <apex:repeat value="{!salescontacts}" var="scs">
      Sortable.create('{!scs.id}',{tag:'div',dropOnEmpty: true, containment: sections,only:'lineitem'});
    </apex:repeat>
    Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
    // ]]>
 </script>
 <script type="text/javascript">
         function SortIt(order){
           var trueorder = '';
           if(order.length==null){return trueorder;}
           else{
           for(x=0;x<order.length;x++){
             if(x==(order.length-1)){
              trueorder = trueorder + order[x].id;
             }
             else{
              trueorder = trueorder + order[x].id + ',';
             }
           }
           return trueorder;
           }
          }
        
         /*
         Debug Functions for checking the group and item order
         */
         function GroupOrder() {
          var sections = document.form['p:f'].getElementsByClassName('section');
          var alerttext = '';
          for(var i=0;i<sections.length;i++){
           var sectionID = sections[i].id;
           var lineitems = document.form['p:f'].getElementById(sectionID).getElementsByClassName('lineitem');
           var realorder = SortIt(lineitems);
           alerttext += sectionID + ': ' + realorder + '\n';
          }
          return alerttext;
         }
</script>
</apex:form>
</apex:page>


CONTROLLER

public class allocateticketExt {

    String aId;
    String pId;
    List<Order_Item__c> tickets;
    List<Order_Item__c> ticketsB = new List<Order_Item__c>();
    List<Sales_Contact__c> salescontacts;
    List<Ticket_Allocation__c> allocations = new List<Ticket_Allocation__c>(); // list of allocations
    List<Ticket_Allocation__c> allocated;
    
    public allocateticketExt(ApexPages.StandardController controller) {
      aId = ApexPages.currentPage().getParameters().get('aId');
      pId = ApexPages.currentPage().getParameters().get('pId');
    }
    
    public PageReference redirect(){
     PageReference pageRef = new PageReference('/'+pId);
     pageRef.setRedirect(true);
     return pageRef;
    }
    
    public void Tickets() {
      tickets = [select Product_Full_Name__c, Product_new__c, Product_new__r.RecordTypeId, Product_new__r.Ticket_Class__c, Quantity__c, Sales_Prospect__c from Order_Item__c where Sales_Prospect__c = :pId and Product_new__r.RecordTypeId='012T00000000EONIA2' order by Quantity__c DESC];
      for(integer i=0;i<tickets.size();i++){
        if(tickets[i].Quantity__c == 1){
          ticketsB.add(tickets[i]);
        }
        else{
          for(integer j=0;j<tickets[i].Quantity__c;j++){
            ticketsB.add(tickets[i]);
          }
        }
      }
    }
    
    public List<Ticket_Allocation__c> getAllocated(){
      allocated = [select Id, Order_Item__r.Product_Full_Name__c, Order_Item__c, Sales_Contact__c, Sales_Contact__r.Name__c, Sales_Contact__r.Role__c from Ticket_Allocation__c where Sales_Contact__r.Sales_Prospect__c = :pId];
      return allocated;
    }
    
    public List<Order_Item__c> getTicket() {
      Tickets();
      return ticketsB;
    }

    public List<Sales_Contact__c> getSalesContacts(){
      salescontacts = [select Id, Name__c, Contact__r.Name, Contact__c, Role__c, Sales_Prospect__c, Number_Of_Tickets_Allocated__c from Sales_Contact__c where Sales_Prospect__c = :pId];
      return salescontacts;
    }
    
    public void setState(String n) {
  state = n;
}

public String getState() {
  return state;
}

public PageReference methodOne() {
  return null;
}

private String state = 'no';
}