Todolist 的拖拽动画实现，用 Promise 轻松搞定

2023-12-13 08:48:25

前言：

初次接触 Vue3 时，我曾尝试制作一个 Todolist，但拖拽动画功能尚未实现。如今，作为 React 学习之旅的一部分，我决定再次挑战这一难题，并使用 Promise 轻松搞定拖拽动画。

实现步骤：

设置状态：

使用 React 的 useState Hook 来管理 Todolist 状态，包括待办项列表和正在拖拽的待办项。
处理拖拽事件：

为 Todolist 项添加事件监听器，在开始、移动和结束拖拽时触发事件。
使用 Promise 异步更新状态：

当开始拖拽时，使用 Promise 来异步更新正在拖拽的待办项的状态。这将确保在更新 DOM 之前完成所有必要的计算。
计算新的位置：

使用拖拽事件中的鼠标位置和 Todolist 项的初始位置来计算新的位置。
更新 Todolist 项：

使用 Promise 解析后，更新 Todolist 项的位置和状态。

示例代码：

import React, { useState } from "react";

const Todolist = () => {
  const [todos, setTodos] = useState([]);
  const [draggingItem, setDraggingItem] = useState(null);

  const handleDragStart = (e, item) => {
    e.dataTransfer.setData("item", item);
    setDraggingItem(item);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const handleDrop = (e) => {
    e.preventDefault();

    const draggedItem = e.dataTransfer.getData("item");

    Promise.resolve().then(() => {
      const updatedTodos = todos.filter((item) => item !== draggedItem);
      const newIndex = todos.findIndex((item) => item.id > draggedItem.id);
      updatedTodos.splice(newIndex, 0, draggedItem);

      setTodos(updatedTodos);
      setDraggingItem(null);
    });
  };

  return (
    <ul onDragOver={handleDragOver} onDrop={handleDrop}>
      {todos.map((item) => (
        <li
          key={item.id}
          draggable={true}
          onDragStart={(e) => handleDragStart(e, item)}
        >
          {item.text}
        </li>
      ))}
    </ul>
  );
};

export default Todolist;