• 【前端】简易化看板


    【前端】简易化看板

    在这里插入图片描述
    在这里插入图片描述

    项目简介

    看板分为三个模块,分别是待办,正在做,已做完三个部分。每个事件采取"卡片"式设计,支持任务间拖拽,删除等操作。

    代码

    import React, { useState } from 'react';
    import { Card, CardContent } from '@/components/ui/card';
    import { Input } from '@/components/ui/input';
    import { Button } from '@/components/ui/button';
    
    const KanbanBoard = () => {
      const [tasks, setTasks] = useState({
        todo: [
          { id: '1', title: '设计新的登录页面' },
          { id: '2', title: '优化数据库查询' }
        ],
        doing: [
          { id: '3', title: '实现用户认证功能' },
          { id: '4', title: '编写单元测试' }
        ],
        done: [
          { id: '5', title: '更新API文档' },
          { id: '6', title: '修复登录bug' }
        ]
      });
    
      const [newTasks, setNewTasks] = useState({
        todo: '',
        doing: '',
        done: ''
      });
    
      const onDragStart = (e, id, sourceColumn) => {
        e.dataTransfer.setData('text/plain', JSON.stringify({ id, sourceColumn }));
      };
    
      const onDragOver = (e) => {
        e.preventDefault();
      };
    
      const onDrop = (e, targetColumn) => {
        e.preventDefault();
        const { id, sourceColumn } = JSON.parse(e.dataTransfer.getData('text'));
        if (sourceColumn === targetColumn) return;
    
        const updatedTasks = { ...tasks };
        const taskToMove = updatedTasks[sourceColumn].find(task => task.id === id);
        updatedTasks[sourceColumn] = updatedTasks[sourceColumn].filter(task => task.id !== id);
        updatedTasks[targetColumn].push(taskToMove);
        setTasks(updatedTasks);
      };
    
      const addTask = (column) => {
        if (newTasks[column].trim()) {
          const updatedTasks = { ...tasks };
          updatedTasks[column] = [...tasks[column], { 
            id: Date.now().toString(), 
            title: newTasks[column]
          }];
          setTasks(updatedTasks);
          setNewTasks({...newTasks, [column]: ''});
        }
      };
    
      const deleteTask = (columnId, taskId) => {
        const updatedTasks = { ...tasks };
        updatedTasks[columnId] = tasks[columnId].filter(task => task.id !== taskId);
        setTasks(updatedTasks);
      };
    
      const renderTask = (task, columnId) => (
         onDragStart(e, task.id, columnId)}
          className="mb-2 shadow-sm hover:shadow-md transition-shadow duration-200"
        >
          <CardContent className="p-3 flex justify-between items-center">
            <p className="text-sm font-medium text-gray-700 truncate flex-grow mr-2">{task.title}p>
            

    效果图

    在这里插入图片描述
    在这里插入图片描述

  • 相关阅读:
    含有双硫键的交联剂NHS-PEG1-SS-PEG1-NHS,NHS-SS-NHS,活性酯-双硫键-活性酯
    【考研复试】计算机专业考研复试英语常见问题四(优缺点/观点/观念篇)
    【vue3】样式穿透、完整新特性、动态css、css-module
    C/C++输出整数部分 2021年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析
    一文搞定CMakeLists编写与库配置
    crt中输入任何命令都不可以成功
    【JAVA-1】JDK、JRE安装及卸载,有手就会!
    vulhub中Aapache Tomcat AJP 文件包含漏洞复现(CVE-2020-1938)
    线性表章节课后习题答案集锦
    代码 $(“.btn“).click(function(){ 和代码 $(document).ready(function() 有啥区别?
  • 原文地址:https://blog.csdn.net/m0_74120525/article/details/140052375