0

誰かが以下のコードを取る方法を説明できますか？

これがスクリーンショットです

代替テキスト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');
        }

    }
}

助けてください！

私は次のコードを機能させるために非常に努力してきました。これにより、あるULから別のULにliをドラッグすると、新しいULにあることが検出され、そのデータが保存されます。どこから始めたらいいのかわからない

私はどんな助けにも非常に感謝します。

4

3 に答える 3

4

jQuery UIでドラッグおよびドロップ可能なプラグインを使用するのはどうですか?

Draggableプラグインは、選択した要素をマウスでドラッグできるようにします。

Droppable プラグインは、ドラッグ可能オブジェクトのドロップ ターゲットを提供します。

于 2009-05-25T19:34:29.823 に答える
0

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
});
于 2013-03-22T23:36:42.280 に答える
0

うん！Draggable と Droppable はトリックを行う必要があります... droppable のdrop()メソッドを使用して、両方のリストの状態を更新できます。

于 2009-05-26T06:49:05.327 に答える