umi框架编写简单的拖拽功能

首先我们需要在项目中创建一个home文件夹用于存储文件，然后在再在文件中创建home.jsx和index.less的格式。
然后接下来就是直接上代码

import React, { useState, useEffect } from "react";
import { NavBar, Space, Input, AutoCenter, Button, Toast } from "antd-mobile";
import { useHistory, useLocation } from 'umi';

import "./index.less";
import Draggable from "react-draggable";
import { nanoid } from "nanoid";
import img1 from '@/images/img1.jpg'
import img2 from '@/images/img2.jpg'
import img3 from '@/images/img3.jpg'
import img4 from '@/images/img4.jpg'
import img5 from '@/images/img5.jpg'

export default function App() {
    const location = useLocation();
    const state = location.query;
    const [wish, setWish] = useState("");
    const [wishlist, setList] = useState([]);
    const [wishstyle, setStyle] = useState("");
    const [vals, setval] = useState();

    const [disabled, setDisabled] = useState(true);
    // 拖拽记录
    const eventLogger = (e, data) => {
        console.log(`data`, data);
        wishlist.forEach(function (value, key) {
            if (value.id == vals) {
                // console.log(`value`, value);
                // console.log(`value`, vals);
                let list = {
                    id: value.id,
                    value: value.value,
                    color: value.color,
                    x: data.lastX,
                    y: data.lastY,
                };
                wishlist.splice(key, 1, list);
                localStorage.setItem("xinyuan", JSON.stringify(wishlist));
                setList([...wishlist]);
            }
        });
    };

    const TextDecoder = (val, index) => {
        console.log(`val`, val);
        setval(val);
    };

    const left = (
        <div style={{ fontSize: 16 }}>
            <Space style={{ "--gap": "16px" }}>
                <p>昵称:{state.name}</p>
            </Space>
        </div>
    );

    // 提交事件
    function useVerifyPhoneNum() {
        let list = {
            id: nanoid(),
            value: wish,
            color: wishstyle,
            x: 0,
            y: 0,
        };
        wishlist.push(list);
        localStorage.setItem("xinyuan", JSON.stringify(wishlist));
        console.log(`wishlist`, wishlist);
        setList([...wishlist]);
        setWish("");
        setStyle("");
    }

    // 删除事件
    function usedelete(val) {
        console.log(`123`, 123);
        // wishlist.splice(val, 1);
        wishlist.forEach(function (value, key) {
            if (value.id == val) {
                console.log("id", value.id);
                console.log("val", val);
                wishlist.splice(key, 1);
                console.log(`key`, key);
                localStorage.setItem("xinyuan", JSON.stringify(wishlist));
                setList([...wishlist]);
            }
        });
        console.log(`wishlist`, wishlist);
    }
    // 修改事件
    function upValue(val) {
        console.log(`val`, val);
    }
    useEffect(() => {
        console.log(`数据`, 1);
        if (localStorage.getItem("xinyuan") != null) {
            let data = JSON.parse(localStorage.getItem("xinyuan"));
            setList(data);
        }
    }, []);


    useEffect(() => {
        // wishlist=data;
        console.log(wish);
        console.log(wishstyle);
        if ((wish.length > 0) & (wishstyle.length > 0)) {
            setDisabled(false);
        } else {
            setDisabled(true);
        }
    }, [wish, wishstyle]);
    return (
        <div>
            <NavBar left={left} backArrow={false}>
                许愿墙
            </NavBar>
            <AutoCenter>
                <Input
                    placeholder="请输入想实现的愿望"
                    value={wish}
                    onChange={(val) => {
                        setWish(val);
                    }}
                    clearable
                />
                <div className="but">
                    <img className={wishstyle == img1 ? 'oncli' : ''} src={img1} onClick={() => {
                        setStyle(img1)
                    }} />
                    <img className={wishstyle == img2 ? 'oncli' : ''} src={img2} onClick={() => {
                        setStyle(img2)
                    }} />
                    <img className={wishstyle == img3 ? 'oncli' : ''} src={img3} onClick={() => {
                        setStyle(img3)
                    }} />
                    <img className={wishstyle == img4 ? 'oncli' : ''} src={img4} onClick={() => {
                        setStyle(img4)
                    }} />
                    <img className={wishstyle == img5 ? 'oncli' : ''} src={img5} onClick={() => {
                        setStyle(img5)
                    }} />
                </div>
                <Button
                    onClick={useVerifyPhoneNum}
                    disabled={disabled}
                    block
                    type="submit"
                    color="primary"
                    size="large"
                >
                    提交
                </Button>
            </AutoCenter>
            {/* 拖拽 */}
            <div className="list">
                {wishlist?.map((item, index) => {
                    // console.log(`item`, item);
                    return (
                        <Draggable
                            key={item.id}
                            handle=".box"
                            defaultPosition={{ x: item.x, y: item.y }}
                            onStop={eventLogger}
                            onStart={(val) => {
                                TextDecoder(item.id);
                            }}
                        >
                            <div>
                                <button
                                    className="butto"
                                    onClick={(val) => {
                                        usedelete(item.id);
                                    }}
                                >
                                    x
                                </button>
                                <div className="inpt">
                                    <p>{item.value}</p>
                                </div>
                                <div className="box" style={{ backgroundColor: item.color }}>
                                    <img src={item.color} />
                                </div>
                            </div>
                        </Draggable>
                    );
                })}
            </div>
        </div>
    );
}

然后就是样式代码阶段

.adm-auto-center {
  margin: 10%;
}

.but {
  margin: 20px 0;
  border-radius: 25px;
}

.adm-auto-center {
  margin: 5%;
}

.but img {
  display: inline-block !important;
  width: 60px;
  height: 60px;
  margin: 3px;
}

.oncli {
  border-style: solid;
  border-width: 2px;
  border-color: red;
}

.box {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  z-index: 0;
}

.box img {
  width: 100px;
  height: 100px;
}

.butto {
  position: relative;
  top: 59px;
  left: 77px;
}

.react-draggable {
  width: 110px !important;
  height: 100px;
  position: absolute;
  top: 400px;
  left: 0;

}

.list {
  flex-wrap: wrap;
  width: 100%;
}

.inpt {
  text-align: center;
  margin: auto;
  position: relative;
  top: 65px;

  input {
    text-align: center;
    width: 30px;
    z-index: 100;
    font-size: 22px;
  }

  p {

    text-align: center;
    color: white;
  }
}