如何实现类Google Keep复选框列表的点击移至底部功能？

以下是完整的实现代码，完全满足你要的点击任务移至底部、已完成任务按点击顺序排列的需求：

<!DOCTYPE html>
<html>
<head>
    <title>Task List</title>
    <style>
        .task-container {
            margin: 1rem;
        }
        .completed-tasks {
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid #eee;
        }
        .task-item {
            padding: 0.5rem;
            cursor: pointer;
            margin: 0.25rem 0;
        }
        .task-item:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="task-container pending-tasks">
        <div class="task-item">Task 1</div>
        <div class="task-item">Task 2</div>
        <div class="task-item">Task 3</div>
        <div class="task-item">Task 4</div>
        <div class="task-item">Task 5</div>
    </div>

    <div class="task-container completed-tasks">
        <h4>Checked items:</h4>
    </div>

    <script>
        // 获取所有任务项和已完成任务容器
        const taskItems = document.querySelectorAll('.task-item');
        const completedContainer = document.querySelector('.completed-tasks');

        // 为每个任务项绑定点击事件
        taskItems.forEach(item => {
            item.addEventListener('click', function() {
                // 将当前任务项移至已完成容器的末尾
                completedContainer.appendChild(this);
            });
        });
    </script>
</body>
</html>

实现说明 #

1. 结构拆分

   • 把任务分为两个容器：pending-tasks 存放未完成任务，completed-tasks 存放已完成任务，并添加标题做区分，用CSS分隔线强化视觉层级。
   • 给所有任务项统一添加 task-item 类，方便批量操作。

2. 核心逻辑

   • 用 querySelectorAll 获取所有任务元素，querySelector 获取已完成容器。
   • 遍历任务元素绑定点击事件：点击时调用 appendChild 方法，该方法会自动将元素从原位置移除，并添加到目标容器的最后，刚好实现「先点击的任务在已完成区上方，后点击的在下方」的效果。

3. 交互优化

   • 增加了hover背景效果，让任务项的可点击性更直观，你可以根据需求调整样式细节。

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