Question

有人可以解释如何使用下面的代码。

继承人的屏幕截图

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中并保存该数据。我不知道从哪里开始

我将非常感谢您的任何帮助。

Answer 1

如何在 jQuery UI 中使用可拖动和可放置插件？

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

Droppable plugin为draggables提供了放置目标。

Answer 2

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

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

Jquery多个可排序列表

3 个答案: