Jquery 多个可排序列表答案

【问题标题】：Jquery Multiple Sortable ListJquery 多个可排序列表
【发布时间】：2010-10-28 19:27:10
【问题描述】：

谁能解释一下如何获取下面的代码。

这是一个屏幕截图

alt text 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 时，它会检测到它在新 UL 中并保存该数据。我不知道从哪里开始

我将非常感谢任何帮助。

【问题讨论】：

标签： jquery ajax jquery-ui-sortable draggable droppable

【解决方案1】：

在 jQuery UI 中使用 draggable 和 droppable 插件怎么样？

Draggable plugin 使选定的元素可以通过鼠标拖动。

Droppable plugin 为可拖动对象提供放置目标。

【讨论】：

【解决方案2】：

是的！ Draggable 和 Droppable 应该可以解决问题...您可以使用 droppable 的 drop() 方法来更新两者的列表状态。

【讨论】：

【解决方案3】：

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

【讨论】：