<div class="transfer">
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">左侧列表</span>
            <span class="transfer-list-count"><span>5</span>/10</span>
        </div>
        <div class="transfer-list-content">
            <ul class="transfer-list-items">
                <li class="transfer-item" data-id="1">
                    <span class="transfer-item-checkbox"></span>
                    <span class="transfer-item-content">选项 1</span>
                </li>
                <!-- 更多选项... -->
            </ul>
        </div>
    </div>
    
    <div class="transfer-operations">
        <button class="transfer-button -primary" title="向右移动选中项">
            <i class="fas fa-chevron-right"></i>
        </button>
        <button class="transfer-button -primary" title="向左移动选中项" disabled>
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="transfer-button" title="向右移动全部">
            <i class="fas fa-arrow-right"></i>
        </button>
        <button class="transfer-button" title="向左移动全部" disabled>
            <i class="fas fa-arrow-left"></i>
        </button>
    </div>
    
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">右侧列表</span>
            <span class="transfer-list-count"><span>0</span>/0</span>
        </div>
        <div class="transfer-list-content">
            <ul class="transfer-list-items"></ul>
        </div>
    </div>
</div>

<div class="transfer">
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">左侧列表</span>
            <span class="transfer-list-count"><span>5</span>/10</span>
        </div>
        <div class="transfer-search">
            <input type="text" class="transfer-search-input" placeholder="搜索左侧列表">
        </div>
        <div class="transfer-list-content">
            <ul class="transfer-list-items">
                <!-- 列表项... -->
            </ul>
        </div>
    </div>
    
    <div class="transfer-operations">
        <!-- 操作按钮... -->
    </div>
    
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">右侧列表</span>
            <span class="transfer-list-count"><span>0</span>/0</span>
        </div>
        <div class="transfer-search">
            <input type="text" class="transfer-search-input" placeholder="搜索右侧列表">
        </div>
        <div class="transfer-list-content">
            <ul class="transfer-list-items"></ul>
        </div>
    </div>
</div>

// 穿梭框基本交互实现示例
// 初始化元素引用
const leftList = document.getElementById('leftList');
const rightList = document.getElementById('rightList');
const toRightBtn = document.getElementById('toRightBtn');
const toLeftBtn = document.getElementById('toLeftBtn');
const allToRightBtn = document.getElementById('allToRightBtn');
const allToLeftBtn = document.getElementById('allToLeftBtn');
const leftCount = document.getElementById('leftCount');
const rightCount = document.getElementById('rightCount');

// 切换项目选择状态
function toggleItemSelection(item) {
    item.classList.toggle('-selected');
    updateButtonStates();
}

// 更新按钮状态
function updateButtonStates() {
    const leftSelected = leftList.querySelectorAll('.transfer-item.-selected').length > 0;
    const rightSelected = rightList.querySelectorAll('.transfer-item.-selected').length > 0;
    const leftHasItems = leftList.querySelectorAll('.transfer-item').length > 0;
    const rightHasItems = rightList.querySelectorAll('.transfer-item').length > 0;
    
    toRightBtn.disabled = !leftSelected;
    toLeftBtn.disabled = !rightSelected;
    allToRightBtn.disabled = !leftHasItems;
    allToLeftBtn.disabled = !rightHasItems;
}

// 移动选中项
function moveSelectedItems(fromList, toList) {
    const selectedItems = fromList.querySelectorAll('.transfer-item.-selected');
    selectedItems.forEach(item => {
        toList.appendChild(item);
        item.classList.remove('-selected');
    });
    updateCounts();
    updateButtonStates();
}

// 移动所有项
function moveAllItems(fromList, toList) {
    const items = Array.from(fromList.querySelectorAll('.transfer-item'));
    items.forEach(item => {
        toList.appendChild(item);
        item.classList.remove('-selected');
    });
    updateCounts();
    updateButtonStates();
}

// 更新计数
function updateCounts() {
    leftCount.textContent = leftList.querySelectorAll('.transfer-item').length;
    rightCount.textContent = rightList.querySelectorAll('.transfer-item').length;
}

// 添加事件监听器
leftList.addEventListener('click', (e) => {
    const item = e.target.closest('.transfer-item');
    if (item) {
        toggleItemSelection(item);
    }
});

rightList.addEventListener('click', (e) => {
    const item = e.target.closest('.transfer-item');
    if (item) {
        toggleItemSelection(item);
    }
});

toRightBtn.addEventListener('click', () => moveSelectedItems(leftList, rightList));
toLeftBtn.addEventListener('click', () => moveSelectedItems(rightList, leftList));
allToRightBtn.addEventListener('click', () => moveAllItems(leftList, rightList));
allToLeftBtn.addEventListener('click', () => moveAllItems(rightList, leftList));

// 初始化
updateButtonStates();

// 搜索功能实现示例
function initSearchFunctionality() {
    const leftSearchInput = document.getElementById('leftSearchInput');
    const rightSearchInput = document.getElementById('rightSearchInput');
    const searchLeftList = document.getElementById('searchLeftList');
    const searchRightList = document.getElementById('searchRightList');
    
    // 左侧列表搜索
    leftSearchInput.addEventListener('input', (e) => {
        const searchTerm = e.target.value.toLowerCase();
        const items = searchLeftList.querySelectorAll('.transfer-item');
        items.forEach(item => {
            const text = item.querySelector('.transfer-item-content').textContent.toLowerCase();
            item.style.display = text.includes(searchTerm) ? '' : 'none';
        });
    });
    
    // 右侧列表搜索
    rightSearchInput.addEventListener('input', (e) => {
        const searchTerm = e.target.value.toLowerCase();
        const items = searchRightList.querySelectorAll('.transfer-item');
        items.forEach(item => {
            const text = item.querySelector('.transfer-item-content').textContent.toLowerCase();
            item.style.display = text.includes(searchTerm) ? '' : 'none';
        });
    });
}

<div id="basic-transfer" class="transfer">
    <!-- 左侧列表 -->
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">可选列表</span>
            <span class="transfer-list-count">8</span>
        </div>
        <div class="transfer-list-content">
            <ul class="transfer-list-items">
                <li class="transfer-item" data-value="item1">
                    <div class="transfer-item-checkbox"></div>
                    <span class="transfer-item-content">选项 1</span>
                </li>
                <!-- 更多选项... -->
            </ul>
        </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="transfer-operations">
        <button class="transfer-button -primary" id="to-right" disabled>
            <i class="fas fa-chevron-right"></i>
        </button>
        <button class="transfer-button -primary" id="all-to-right" disabled>
            <i class="fas fa-chevron-right"></i>
            <i class="fas fa-chevron-right"></i>
        </button>
        <button class="transfer-button -primary" id="to-left" disabled>
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="transfer-button -primary" id="all-to-left" disabled>
            <i class="fas fa-chevron-left"></i>
            <i class="fas fa-chevron-left"></i>
        </button>
    </div>
    
    <!-- 右侧列表 -->
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">已选列表</span>
            <span class="transfer-list-count">0</span>
        </div>
        <div class="transfer-list-content">
            <div class="transfer-empty">
                <i class="fas fa-inbox transfer-empty-icon"></i>
                <div>暂无数据</div>
            </div>
        </div>
    </div>
</div>

<div id="search-transfer" class="transfer">
    <!-- 左侧列表 -->
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">可选列表</span>
            <span class="transfer-list-count">8</span>
        </div>
        <div class="transfer-search">
            <input type="text" class="transfer-search-input" placeholder="搜索...">
        </div>
        <div class="transfer-list-content">
            <!-- 列表内容... -->
        </div>
    </div>
    
    <!-- 操作按钮... -->
    
    <!-- 右侧列表 -->
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">已选列表</span>
            <span class="transfer-list-count">0</span>
        </div>
        <div class="transfer-search">
            <input type="text" class="transfer-search-input" placeholder="搜索...">
        </div>
        <div class="transfer-list-content">
            <!-- 列表内容... -->
        </div>
    </div>
</div>

// 初始化基础穿梭框
function initBasicTransfer() {
    const transfer = document.getElementById('basic-transfer');
    const leftList = transfer.querySelector('.transfer-list:nth-child(1) .transfer-list-items');
    const rightList = transfer.querySelector('.transfer-list:nth-child(3) .transfer-list-content');
    const leftCount = transfer.querySelector('.transfer-list:nth-child(1) .transfer-list-count');
    const rightCount = transfer.querySelector('.transfer-list:nth-child(3) .transfer-list-count');
    const toRightBtn = document.getElementById('to-right');
    const allToRightBtn = document.getElementById('all-to-right');
    const toLeftBtn = document.getElementById('to-left');
    const allToLeftBtn = document.getElementById('all-to-left');
    
    // 处理项目选择
    leftList.addEventListener('click', function(e) {
        const item = e.target.closest('.transfer-item');
        if (item) {
            item.classList.toggle('-selected');
            updateButtons();
        }
    });
    
    // 绑定按钮事件
    toRightBtn.addEventListener('click', function() {
        moveSelectedItems(leftList, rightList);
        updateButtons();
    });
    
    allToRightBtn.addEventListener('click', function() {
        moveAllItems(leftList, rightList);
        updateButtons();
    });
    
    toLeftBtn.addEventListener('click', function() {
        moveSelectedItems(rightList.querySelector('.transfer-list-items'), leftList);
        updateButtons();
    });
    
    allToLeftBtn.addEventListener('click', function() {
        moveAllItems(rightList.querySelector('.transfer-list-items'), leftList);
        updateButtons();
    });
    
    // 更新按钮状态
    function updateButtons() {
        const leftSelected = leftList.querySelectorAll('.transfer-item.-selected').length > 0;
        const leftHasItems = leftList.querySelectorAll('.transfer-item').length > 0;
        const rightListItems = rightList.querySelector('.transfer-list-items');
        const rightSelected = rightListItems ? rightListItems.querySelectorAll('.transfer-item.-selected').length > 0 : false;
        const rightHasItems = rightListItems ? rightListItems.querySelectorAll('.transfer-item').length > 0 : false;
        
        toRightBtn.disabled = !leftSelected;
        allToRightBtn.disabled = !leftHasItems;
        toLeftBtn.disabled = !rightSelected;
        allToLeftBtn.disabled = !rightHasItems;
        
        // 更新计数
        leftCount.textContent = leftHasItems ? leftList.querySelectorAll('.transfer-item').length : 0;
        rightCount.textContent = rightHasItems ? rightListItems.querySelectorAll('.transfer-item').length : 0;
        
        // 处理空状态
        if (rightHasItems) {
            rightList.querySelectorAll('.transfer-empty').forEach(el => el.remove());
        } else if (!rightList.querySelector('.transfer-empty')) {
            const empty = document.createElement('div');
            empty.className = 'transfer-empty';
            empty.innerHTML = `
                <i class="fas fa-inbox transfer-empty-icon"></i>
                <div>暂无数据</div>
            `;
            rightList.appendChild(empty);
        }
    }
    
    // 移动选中的项目
    function moveSelectedItems(fromList, toList) {
        const selectedItems = fromList.querySelectorAll('.transfer-item.-selected');
        if (selectedItems.length === 0) return;
        
        // 确保目标列表有列表容器
        let toListItems = toList.querySelector('.transfer-list-items');
        if (!toListItems) {
            // 移除空状态
            toList.querySelectorAll('.transfer-empty').forEach(el => el.remove());
            
            // 创建列表容器
            toListItems = document.createElement('ul');
            toListItems.className = 'transfer-list-items';
            toList.appendChild(toListItems);
            
            // 添加点击事件
            toListItems.addEventListener('click', function(e) {
                const item = e.target.closest('.transfer-item');
                if (item) {
                    item.classList.toggle('-selected');
                    updateButtons();
                }
            });
        }
        
        // 移动项目
        selectedItems.forEach(item => {
            item.classList.remove('-selected');
            toListItems.appendChild(item);
        });
    }
    
    // 移动所有项目
    function moveAllItems(fromList, toList) {
        const items = fromList.querySelectorAll('.transfer-item');
        if (items.length === 0) return;
        
        // 确保目标列表有列表容器
        let toListItems = toList.querySelector('.transfer-list-items');
        if (!toListItems) {
            // 移除空状态
            toList.querySelectorAll('.transfer-empty').forEach(el => el.remove());
            
            // 创建列表容器
            toListItems = document.createElement('ul');
            toListItems.className = 'transfer-list-items';
            toList.appendChild(toListItems);
            
            // 添加点击事件
            toListItems.addEventListener('click', function(e) {
                const item = e.target.closest('.transfer-item');
                if (item) {
                    item.classList.toggle('-selected');
                    updateButtons();
                }
            });
        }
        
        // 移动项目
        items.forEach(item => {
            item.classList.remove('-selected');
            toListItems.appendChild(item);
        });
    }
}

// 初始化搜索功能的穿梭框
function initSearchTransfer() {
    const transfer = document.getElementById('search-transfer');
    const leftSearch = transfer.querySelector('.transfer-list:nth-child(1) .transfer-search-input');
    const rightSearch = transfer.querySelector('.transfer-list:nth-child(3) .transfer-search-input');
    const leftList = transfer.querySelector('.transfer-list:nth-child(1) .transfer-list-items');
    const rightList = transfer.querySelector('.transfer-list:nth-child(3) .transfer-list-content');
    
    // 左侧搜索
    leftSearch.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase().trim();
        const items = leftList.querySelectorAll('.transfer-item');
        
        items.forEach(item => {
            const content = item.querySelector('.transfer-item-content').textContent.toLowerCase();
            if (content.includes(searchTerm)) {
                item.style.display = '';
            } else {
                item.style.display = 'none';
            }
        });
    });
    
    // 右侧搜索（如果有内容）
    rightSearch.addEventListener('input', function() {
        const rightListItems = rightList.querySelector('.transfer-list-items');
        if (!rightListItems) return;
        
        const searchTerm = this.value.toLowerCase().trim();
        const items = rightListItems.querySelectorAll('.transfer-item');
        
        items.forEach(item => {
            const content = item.querySelector('.transfer-item-content').textContent.toLowerCase();
            if (content.includes(searchTerm)) {
                item.style.display = '';
            } else {
                item.style.display = 'none';
            }
        });
    });
    
    // 其他初始化代码类似于基础穿梭框
    // ...
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initBasicTransfer();
    // 可以添加更多初始化函数
});

<div class="transfer">
    <!-- 左侧列表 -->
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">可选项目</span>
            <span class="transfer-list-count">0</span>
        </div>
        <div class="transfer-search">
            <input type="text" class="transfer-search-input" placeholder="搜索项目...">
        </div>
        <div class="transfer-list-content">
            <ul class="transfer-list-items">
                <li class="transfer-item">
                    <span class="transfer-item-checkbox"></span>
                    <span class="transfer-item-content">项目名称</span>
                </li>
                <!-- 更多项目... -->
            </ul>
        </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="transfer-operations">
        <button class="transfer-button -primary">
            <i class="fas fa-chevron-right"></i>
        </button>
        <button class="transfer-button -primary">
            <i class="fas fa-chevron-right"></i>
            <i class="fas fa-chevron-right"></i>
        </button>
        <button class="transfer-button">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="transfer-button">
            <i class="fas fa-chevron-left"></i>
            <i class="fas fa-chevron-left"></i>
        </button>
    </div>
    
    <!-- 右侧列表 -->
    <div class="transfer-list">
        <div class="transfer-list-header">
            <span class="transfer-list-title">已选项目</span>
            <span class="transfer-list-count">0</span>
        </div>
        <div class="transfer-search">
            <input type="text" class="transfer-search-input" placeholder="搜索项目...">
        </div>
        <div class="transfer-list-content">
            <ul class="transfer-list-items">
                <!-- 右侧项目... -->
            </ul>
        </div>
    </div>
</div>

// 穿梭框基本交互示例
function initTransfer(transferId) {
    const transfer = document.getElementById(transferId);
    const leftList = transfer.querySelector('#leftList');
    const rightList = transfer.querySelector('#rightList');
    const leftCount = transfer.querySelector('#leftCount');
    const rightCount = transfer.querySelector('#rightCount');
    const toRightBtn = transfer.querySelector('#toRightBtn');
    const toLeftBtn = transfer.querySelector('#toLeftBtn');
    const toRightAllBtn = transfer.querySelector('#toRightAllBtn');
    const toLeftAllBtn = transfer.querySelector('#toLeftAllBtn');
    
    // 初始化计数
    updateCounts();
    
    // 点击项目选中/取消选中
    leftList.addEventListener('click', handleItemClick);
    rightList.addEventListener('click', handleItemClick);
    
    // 移动选中项目
    toRightBtn.addEventListener('click', () => moveSelectedItems(leftList, rightList));
    toLeftBtn.addEventListener('click', () => moveSelectedItems(rightList, leftList));
    
    // 移动全部项目
    toRightAllBtn.addEventListener('click', () => moveAllItems(leftList, rightList));
    toLeftAllBtn.addEventListener('click', () => moveAllItems(rightList, leftList));
    
    // 处理项目点击
    function handleItemClick(e) {
        const item = e.target.closest('.transfer-item');
        if (item) {
            item.classList.toggle('-selected');
            updateButtonStates();
        }
    }
    
    // 移动选中项目
    function moveSelectedItems(fromList, toList) {
        const selectedItems = fromList.querySelectorAll('.transfer-item.-selected');
        
        if (selectedItems.length > 0) {
            // 克隆选中的项目并添加到目标列表
            selectedItems.forEach(item => {
                const newItem = item.cloneNode(true);
                newItem.classList.remove('-selected');
                toList.appendChild(newItem);
            });
            
            // 移除源列表中的选中项目
            selectedItems.forEach(item => item.remove());
            
            // 更新计数和按钮状态
            updateCounts();
            updateButtonStates();
        }
    }
    
    // 移动全部项目
    function moveAllItems(fromList, toList) {
        const items = Array.from(fromList.querySelectorAll('.transfer-item'));
        
        if (items.length > 0) {
            // 克隆所有项目并添加到目标列表
            items.forEach(item => {
                const newItem = item.cloneNode(true);
                newItem.classList.remove('-selected');
                toList.appendChild(newItem);
            });
            
            // 清空源列表
            fromList.innerHTML = '';
            
            // 更新计数和按钮状态
            updateCounts();
            updateButtonStates();
        }
    }
    
    // 更新计数
    function updateCounts() {
        leftCount.textContent = leftList.querySelectorAll('.transfer-item').length;
        rightCount.textContent = rightList.querySelectorAll('.transfer-item').length;
        
        // 处理空状态
        if (leftList.querySelectorAll('.transfer-item').length === 0) {
            leftList.innerHTML = `
                

                    
                    
暂无项目
                
            `;
        } else {
            // 移除空状态提示（如果存在）
            const emptyState = leftList.querySelector('.transfer-empty');
            if (emptyState) {
                emptyState.remove();
            }
        }
        
        if (rightList.querySelectorAll('.transfer-item').length === 0) {
            rightList.innerHTML = `
                

                    
                    
暂无项目
                
            `;
        } else {
            // 移除空状态提示（如果存在）
            const emptyState = rightList.querySelector('.transfer-empty');
            if (emptyState) {
                emptyState.remove();
            }
        }
    }
    
    // 更新按钮状态
    function updateButtonStates() {
        const leftHasSelected = leftList.querySelectorAll('.transfer-item.-selected').length > 0;
        const rightHasSelected = rightList.querySelectorAll('.transfer-item.-selected').length > 0;
        const leftHasItems = leftList.querySelectorAll('.transfer-item').length > 0;
        const rightHasItems = rightList.querySelectorAll('.transfer-item').length > 0;
        
        toRightBtn.disabled = !leftHasSelected;
        toLeftBtn.disabled = !rightHasSelected;
        toRightAllBtn.disabled = !leftHasItems;
        toLeftAllBtn.disabled = !rightHasItems;
    }
}

// 初始化穿梭框
initTransfer('basicTransfer');

// 搜索功能实现示例
function initSearchableTransfer(transferId) {
    const transfer = document.getElementById(transferId);
    const leftInput = transfer.querySelector('#searchLeftInput');
    const rightInput = transfer.querySelector('#searchRightInput');
    const leftList = transfer.querySelector('#searchLeftList');
    const rightList = transfer.querySelector('#searchRightList');
    
    // 存储原始项目数据
    const originalLeftItems = Array.from(leftList.querySelectorAll('.transfer-item'));
    const originalRightItems = Array.from(rightList.querySelectorAll('.transfer-item'));
    
    // 为搜索输入框添加事件监听
    leftInput.addEventListener('input', () => filterItems(leftList, leftInput.value));
    rightInput.addEventListener('input', () => filterItems(rightList, rightInput.value));
    
    // 过滤项目
    function filterItems(list, searchTerm) {
        // 移除列表中的所有子元素
        while (list.firstChild) {
            list.removeChild(list.firstChild);
        }
        
        // 获取原始项目数据
        let allItems;
        if (list.id === 'searchLeftList') {
            allItems = originalLeftItems;
        } else {
            allItems = originalRightItems;
        }
        
        // 过滤并添加匹配的项目
        const filteredItems = allItems.filter(item => {
            const text = item.dataset.text || item.textContent.toLowerCase();
            return text.includes(searchTerm.toLowerCase());
        });
        
        // 添加过滤后的项目到列表
        if (filteredItems.length > 0) {
            filteredItems.forEach(item => {
                const newItem = item.cloneNode(true);
                list.appendChild(newItem);
            });
        } else {
            // 显示空状态
            list.innerHTML = `
                

                    
                    
未找到匹配的项目
                
            `;
        }
    }
}

// 初始化带搜索功能的穿梭框
initSearchableTransfer('searchableTransfer');