Yii2框架中实现选中内容通过>>按钮跨Div迁移的技术问询

嘿，我来帮你搞定这个需求！你想要实现的是让候选人选中左侧容器里的编程语言技能，点击>>按钮把选中项迁移到右侧Div对吧？结合你已经在用的Yii2 Sortable组件，我给你整理了一套完整的实现方案，分步骤来：

1. 调整Sortable组件结构（添加复选框） #

首先得给每个技能选项加上复选框，这样才能让用户选择要迁移的项，同时保留Sortable的拖拽特性（如果需要的话）：

<?php
use yii\jui\Sortable;
?>

<div class="skill-transfer-container">
    <!-- 左侧可选技能容器 -->
    <div class="skill-column">
        <h4>可选技能</h4>
        <?php echo Sortable::widget([
            'id' => 'source-skills',
            'items' => [
                ['content' => '<label><input type="checkbox" value="C++"> C++</label>'],
                ['content' => '<label><input type="checkbox" value="Java"> Java</label>'],
                ['content' => '<label><input type="checkbox" value="MySQL"> MySQL</label>'],
                // 按需添加更多技能选项
            ],
            'options' => ['class' => 'sortable-list'],
        ]);?>
    </div>

    <!-- 中间操作按钮 -->
    <div class="transfer-buttons">
        <button id="btn-move-right">>></button>
        <button id="btn-move-left"><<</button> <!-- 可选：添加移回左侧的按钮 -->
    </div>

    <!-- 右侧已选技能容器 -->
    <div class="skill-column">
        <h4>已选技能</h4>
        <?php echo Sortable::widget([
            'id' => 'target-skills',
            'connected' => true, // 保持和左侧的拖拽关联（可选）
            'items' => [], // 初始为空
            'options' => ['class' => 'sortable-list'],
        ]);?>
    </div>
</div>

2. 基础布局样式 #

加一点CSS让界面更美观，布局更合理：

.skill-transfer-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
}

.skill-column {
    width: 220px;
}

.sortable-list {
    list-style: none;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-height: 150px;
    background-color: #f8f9fa;
}

.sortable-list li {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.sortable-list li:last-child {
    border-bottom: none;
}

.transfer-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 50px;
}

.transfer-buttons button {
    padding: 8px 12px;
    border: 1px solid #6c757d;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.transfer-buttons button:hover {
    background-color: #e9ecef;
}

/* 可选：给右侧已选项加选中样式，方便移回操作 */
.sortable-list li.selected {
    background-color: #dee2e6;
}

3. 核心JavaScript逻辑（按钮迁移功能） #

写JS代码实现点击按钮时，把选中的项从左侧移到右侧，以及可选的移回功能：

document.addEventListener('DOMContentLoaded', function() {
    const sourceList = document.getElementById('source-skills');
    const targetList = document.getElementById('target-skills');
    const moveRightBtn = document.getElementById('btn-move-right');
    const moveLeftBtn = document.getElementById('btn-move-left');

    // >> 按钮：把左侧选中项移到右侧
    moveRightBtn.addEventListener('click', function() {
        // 获取左侧所有被选中的复选框
        const checkedBoxes = sourceList.querySelectorAll('input[type="checkbox"]:checked');
        
        checkedBoxes.forEach(checkbox => {
            const listItem = checkbox.closest('li');
            // 克隆节点（避免原节点移除后状态丢失），也可以直接移动原节点
            const clonedItem = listItem.cloneNode(true);
            // 移除克隆节点里的复选框（按需保留或移除）
            clonedItem.querySelector('input[type="checkbox"]').remove();
            // 添加到右侧容器
            targetList.appendChild(clonedItem);
            // 删除原节点
            listItem.remove();
        });
    });

    // << 按钮：把右侧选中项移回左侧
    moveLeftBtn.addEventListener('click', function() {
        // 获取右侧所有被标记为选中的项
        const selectedItems = targetList.querySelectorAll('li.selected');
        
        selectedItems.forEach(item => {
            const skillName = item.textContent.trim();
            // 重新构建带复选框的列表项
            const newListItem = document.createElement('li');
            newListItem.innerHTML = `<label><input type="checkbox" value="${skillName}"> ${skillName}</label>`;
            // 添加到左侧容器
            sourceList.appendChild(newListItem);
            // 删除右侧的项
            item.remove();
        });
    });

    // 可选：点击右侧项时切换选中状态，方便移回操作
    targetList.addEventListener('click', function(e) {
        if (e.target.tagName === 'LI') {
            e.target.classList.toggle('selected');
        }
    });
});

4. 可选：后端保存已选技能 #

如果需要把用户选择的技能保存到数据库，可以在表单提交前收集右侧的技能数据，放到隐藏输入框中：

// 假设你的表单ID是skill-form
document.getElementById('skill-form').addEventListener('submit', function(e) {
    const targetItems = targetList.querySelectorAll('li');
    // 收集已选技能到数组
    const selectedSkills = Array.from(targetItems).map(item => item.textContent.trim());
    // 设置隐藏输入框的值（需要在表单里添加<input type="hidden" id="selected-skills" name="selected-skills">）
    document.getElementById('selected-skills').value = JSON.stringify(selectedSkills);
});

后端控制器接收数据：

public function actionSaveSkills()
{
    if (Yii::$app->request->isPost) {
        $selectedSkills = json_decode(Yii::$app->request->post('selected-skills'), true);
        // 这里可以把$selectedSkills保存到数据库，比如关联候选人模型
        // 示例：$candidate->skills = implode(',', $selectedSkills); $candidate->save();
    }
}

内容的提问来源于stack exchange，提问作者Ann