Yii Framework CJuiSortable 可排序清單元件：拖曳重新排序與儲存順序

CJuiSortable 封裝 jQuery UI Sortable，讓清單項目支援拖曳重新排序，適用於選單管理、任務優先級、圖片排序等場景。

基本用法

<?php
Yii::app()->clientScript->registerCss('sortable', "
    #sortable { list-style:none; margin:0; padding:0; width:60%; }
    #sortable li { margin:2px; padding:8px; border:1px solid #ddd; background:#f7f7f7; cursor:move; }
    #sortable li.ui-sortable-placeholder { border:2px dashed #2196f3; background:#e3f2fd; height:30px; visibility:visible !important; }
", 'screen', CClientScript::POS_HEAD);
?>

<h2>可排序清單</h2>

<?php $this->widget('zii.widgets.jui.CJuiSortable', array(
    'id' => 'sortable',
    'items' => array(
        'id1' => '第一項：系統設定',
        'id2' => '第二項：用戶管理',
        'id3' => '第三項：權限控制',
        'id4' => '第四項：日誌審計',
        'id5' => '第五項：備份還原',
    ),
    'options' => array(
        'cursor' => 'n-resize',        // 拖曳時游標
        'handle' => '.sort-handle',    // 可選：指定拖曳把手
        'placeholder' => 'ui-sortable-placeholder', // 佔位樣式類別
        'forcePlaceholderSize' => true,
        'opacity' => 0.8,
        'revert' => 200,               // 動畫回位毫秒
        'update' => 'js:function(event, ui) {
            saveOrder();
        }',
    ),
)); ?>

<script>
function saveOrder() {
    var order = $("#sortable").sortable("toArray"); // 取得 id 陣列
    console.log("新順序:", order);
    $.post("'.Yii::app()->createUrl('menu/saveOrder').'", { order: order.join(",") });
}
</script>

關鍵選項與事件

進階：跨清單拖曳（待辦/進行中/完成）

<div class="board">
    <h3>待辦</h3>
    <ul id="todo" class="sortable-list"><li id="t1">任務一</li></ul>
    <h3>進行中</h3>
    <ul id="doing" class="sortable-list"><li id="d1">任務二</li></ul>
    <h3>完成</h3>
    <ul id="done" class="sortable-list"></ul>
</div>

<script>
$(".sortable-list").sortable({
    connectWith: ".sortable-list",
    receive: function(event, ui) {
        var status = $(this).attr("id"); // todo/doing/done
        var taskId = ui.item.attr("id");
        $.post("updateTaskStatus", { id: taskId, status: status });
    }
});
</script>

儲存順序到資料庫

// Controller
public function actionSaveOrder() {
    $order = explode(',', $_POST['order']);
    foreach ($order as $index => $id) {
        Menu::model()->updateByPk($id, array('sort_order' => $index + 1));
    }
    echo CJSON::encode(array('success' => true));
}

注意事項

• 項目 id 必須唯一且對應資料庫主鍵
• 大量項目考慮虛擬滾動或分頁，避免 DOM 過大
• 行動裝置需觸控支援（jQuery UI Touch Punch 或 1.11+）
• 無障礙：提供鍵盤排序替代方案（如上移/下移按鈕）
• 跨清單拖曳時 connectWith 雙向設定，注意 receive/remove 事件配對