Multiple Jquery Sortable List

[eluser]Jbeasley6651[/eluser]
Can someone please explain how to take the code below.

Heres a screen shot

<a href="http://img196.imageshack.us/img196/9514/picture4omk.png">http://img196.imageshack.us/img196/9514/picture4omk.png</a>

this is my JS

Code:

$(document).ready(function(){
                          
    $(function() {
        $("#sortable1, #sortable2").sortable(
            
            { connectWith: '.connectedSortable',
            opacity: 0.6,
            cursor: 'move',
            update: function() {
            var order = $(this).sortable("serialize");
            $.post("home/updateBOX", order, function(theResponse){
                $("#contentRight").html(theResponse);
            });                                                              
        }                                  
        });
    });

});

This is my current View

Code:

<div id="contentLeft">
    Category 1
    <ul id="sortable1" class="connectedSortable">
    &lt;?php foreach($getcat1->result() as $box) :?&gt;
    
            <li id="recordsArray_&lt;?php echo $box->boxID ?&gt;">&lt;?php echo $box->boxID . ". " . $box->boxID . $box->boxText ?&gt;</li>
        &lt;?php endforeach; ?&gt;
    </ul>
    Category 2
    <ul id="sortable2" class="connectedSortable">
    &lt;?php foreach($getcat2->result() as $box) :?&gt;

        <li id="recordsArray_&lt;?php echo $box->boxID ?&gt;">&lt;?php echo $box->boxID . ". " . $box->boxID . $box->boxText ?&gt;</li>
        &lt;?php endforeach; ?&gt;
    </ul>
</div>

This is my current Controller

Code:

function index()
    {
        
        // Boxes
        $this->db->order_by('boxListingID','ASC');        
        $this->db->where('boxListingCat',1);
        $data['getcat1'] = $this->db->get('boxes');
        
        $this->db->order_by('boxListingID','ASC');
        $this->db->where('boxListingCat',2);
        $data['getcat2'] = $this->db->get('boxes');
        
        
        // Initialize
        $this->layout->set('nav', $this->class);
        $this->layout->load('layout','home/home_view',$data);
    }    
    
    function updateBOX()
    {
        if (empty($_POST))  { return false; }
        $updateRecordsArray = $_POST['recordsArray'];
        $listingCounter = 1;
        foreach ($updateRecordsArray as $listingCounter=>$recordIDValue) {
            $this->db->set('boxListingID',$listingCounter+1)->where('boxID',$recordIDValue)->update('boxes');
        }
        
    }
}

Please Help!

I have been trying very hard to make the following code work so that when you are dragging a li from one UL to another it will detect that it's in a new UL and save that data. I don't know where to start

I will be very very appreciative for any help.