如何应对jQuery多个可排序列表？

有人能解释下下面的代码吗？这里是屏幕截图：http://img196.imageshack.us/img196/9514/picture4omk.png。

JS：

$(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);
            });                                                              
        }                                 
        });
    });

});

当前的视图：

<div id="contentLeft">
    Category 1
    <ul id="sortable1" class="connectedSortable">
    <?php foreach($getcat1->result() as $box) :?>

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

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

Controller：

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');
        }

    }
}

我一直在研究这段代码，以便当从一个UL拖动li到另一个UL时，它能检测到它在一个新的UL中，并保存该数据。

但我不知道该从哪里开始，我会非常感激你的帮助。

What about using the draggable and droppable plugins in jQuery UI?

The Draggable plugin makes selected elements draggable by mouse.

the Droppable plugin provides a drop target for draggables.

Yup! Draggable and Droppable should do the trick... You can use the drop() method of droppable to update the list state for both.

http://jsfiddle.net/Waw4V/2/

If you're looking to make multiple sortables, it is best done by attaching classes to each kind of list. The above link uses divs, but you can apply it to lists.

Lets say you have a list of questions:

<div id='questionList'>
    <div class='question'>
        <div>Question Details</div>
        <div class='answerForQuestion'>
            <div class='answer'>Answer 3
                <span>Details</span>
            </div>
            <div class='answer'>Answer 2</div>
            <div class='answer'>Answer 4</div>
        </div>
    </div>
    <div class='question'>
        <div>Question Details</div>
        <div class='answerForQuestion'>
            <div class='answer'>Answer 2</div>
            <div class='answer'>Answer 7</div>
            <div class='answer'>Answer 11</div>
        </div>
    </div>
</div>

Here's what you do in jQuery:

$('#questionList').sortable(); // this makes one each major category sortable
$('.answerForQuestion').sortable({  // this makes sub categories sortable
    connectWith: ['.answerForQuestion']
    change: // this fires everytime the item you drag is moved, put in your logic here, such as an ajax call to update your database
});