Jquery множественный сортируемый список

Question

Может кто-нибудь объяснить, как взять код ниже.

Вот скриншот

альтернативный текст 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>

Это мой текущий контроллер

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

    }
}

Пожалуйста, помогите!

Я очень старался, чтобы следующий код работал, чтобы при перетаскивании li из одного UL в другой он обнаружил, что он находится в новом UL, и сохранил эти данные. Я не знаю с чего начать

Буду очень признателен за любую помощь.

Answer 1

А как насчет использования перетаскиваемых плагинов и в jQuery UI ?

Плагин Draggable делает выбранные элементы перетаскиваемыми мышью.

плагин Droppable предоставляет цель перетаскивания для перетаскиваемых объектов.

Answer 2

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

Если вы хотите создать несколько сортируемых таблиц, лучше всего это делать, прикрепляя классы к каждому виду списка. Приведенная выше ссылка использует div, но вы можете применить ее к спискам.

Допустим, у вас есть список вопросов:

<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>

Вот что вы делаете в 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
});

Answer 3

Да! Draggable и Droppable должны сделать свое дело ... Вы можете использовать метод drop () для сброса, чтобы обновить состояние списка для обоих.