Yii Framework CJuiDraggable 可拖曳元件：任意內容拖放實作

CJuiDraggable 封裝 jQuery UI Draggable，將包裹區域內的任意內容（圖片、表單、Widget）變為可拖曳。

基本用法：拖曳圖片

<?php $this->beginWidget('zii.widgets.jui.CJuiDraggable', array(
    'options' => array(
        'cursor' => 'move',           // 拖曳時游標
        'revert' => false,            // 放開後是否回彈
        'opacity' => 0.7,             // 拖曳時透明度
        'zIndex' => 1000,             // 拖曳時層級
        'containment' => 'parent',    // 限制拖曳範圍：parent/document/window/selector
        'scroll' => true,             // 自動捲動容器
    ),
    'htmlOptions' => array(
        'style' => 'width:200px; height:200px; padding:5px; border:1px solid #ddd; background:#f9f9f9;',
    ),
)); ?>
    <img id="image" width="200" src="/images/draggable-demo.png" alt="可拖曳圖片">
<?php $this->endWidget(); ?>

關鍵選項詳解

進階：拖曳把手與表單元素排除

<?php $this->beginWidget('zii.widgets.jui.CJuiDraggable', array(
    'options' => array(
        'handle' => '.panel-header',  // 只有標題列可拖曳
        'cancel' => 'input,textarea,button,select,a',  // 表單元素不可拖曳
        'containment' => '#dashboard',
    ),
    'htmlOptions' => array('class' => 'dashboard-widget'),
)); ?>
    <div class="panel-header"><h3>可拖曳面板</h3></div>
    <div class="panel-body">
        <input type="text" placeholder="此輸入框不會觸發拖曳">
    </div>
<?php $this->endWidget(); ?>

事件回調

'options' => array(
    'start' => 'js:function(event, ui) { $(this).addClass("dragging"); }',
    'drag' => 'js:function(event, ui) { console.log(ui.position); }',
    'stop' => 'js:function(event, ui) { 
        $(this).removeClass("dragging");
        $.post("savePosition", { x: ui.position.left, y: ui.position.top });
    }',
),

與 CJuiDroppable 配合實現拖放區域

參考下一章 CJuiDroppable，可建立「拖曳來源」與「放置目標」的完整互動。

注意事項

• 被拖曳元素需有 position: relative/absolute/fixed 才能正確定位
• 行動裝置觸控需 jQuery UI Touch Punch 或 1.11+ 內建支援
• 大量可拖曳元素考慮效能：使用 distance/delay 減少誤觸發
• 無障礙：提供鍵盤替代方案（如方向鍵移動）