jquery - 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 时，它会检测到它在新 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 应该可以解决问题...您可以使用 droppable 的drop()方法来更新两者的列表状态。