Yii Framework CJuiDroppable 放置區域元件：接收拖曳內容與互動回饋

CJuiDroppable 封裝 jQuery UI Droppable，定義可接收拖曳元素的區域，配合 CJuiDraggable 實現完整拖放互動。

基本用法：顯示放置提示

<?php $this->beginWidget('zii.widgets.jui.CJuiDroppable', array(
    'options' => array(
        'accept' => '.draggable-item',  // 接受的拖曳元素選擇器
        'activeClass' => 'drop-active', // 拖曳元素進入時的類別
        'hoverClass' => 'drop-hover',   // 懸停時的類別
        'drop' => 'js:function(event, ui) {
            $(this).html("放置成功! ID: " + ui.draggable.attr("id"));
            $(this).addClass("dropped");
        }',
        'out' => 'js:function(event, ui) {
            $(this).html("拖曳至此區域");
            $(this).removeClass("drop-hover");
        }',
    ),
    'htmlOptions' => array(
        'style' => 'width:300px; height:200px; padding:20px; border:2px dashed #ccc; background:#fafafa; text-align:center;',
    ),
)); ?>
    拖曳項目至此區域
<?php $this->endWidget(); ?>

CSS 樣式建議

.drop-active { border-color: #2196f3; background: #e3f2fd; }
.drop-hover { border-color: #4caf50; background: #e8f5e9; }
.dropped { border-style: solid; border-color: #4caf50; }

完整拖放流程：購物車範例

<!-- 商品列表（可拖曳） -->
<?php foreach ($products as $p): ?>
    <?php $this->beginWidget('zii.widgets.jui.CJuiDraggable', array(
        'options' => array('revert' => 'invalid', 'helper' => 'clone', 'cursor' => 'move'),
        'htmlOptions' => array('class' => 'product-item', 'data-id' => $p->id),
    )); ?>
        <img src="<?php echo $p->image; ?>" width="80"> <?php echo $p->name; ?> $<?php echo $p->price; ?>
    <?php $this->endWidget(); ?>
<?php endforeach; ?>

<!-- 購物車（可放置） -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDroppable', array(
    'options' => array(
        'accept' => '.product-item',
        'drop' => 'js:function(event, ui) {
            var productId = ui.draggable.data("id");
            var productName = ui.draggable.text().trim();
            $(this).append("<div class=\"cart-item\">" + productName + "</div>");
            $.post("'.Yii::app()->createUrl('cart/add').'", { id: productId });
        }',
    ),
    'htmlOptions' => array('id' => 'cart', 'style' => 'width:300px; min-height:200px; border:1px solid #333; padding:10px;'),
)); ?>
    <h3>購物車</h3>
    <div id="cart-items"></div>
<?php $this->endWidget(); ?>

關鍵選項對照

事件順序

1. draggable start
2. droppable activate / over
3. draggable drag（持續）
4. droppable out / over（移出/移入）
5. draggable stop
6. droppable deactivate / drop

注意事項

• helper: 'clone' 讓原元素保留位置，拖曳的是複製品
• revert: 'invalid' 放置無效區域時動畫回原位
• 行動裝置需額外支援觸控事件（jQuery UI Touch Punch）
• 伺服器端必須同步驗證資料完整性，前端拖放僅為 UX