React 拖动图片

import React, { useState } from 'react'
import '../css/main.css'
import DraggAble from 'react-draggable'
export default function Main() {
    const imglist = [
        "https://img1.baidu.com/it/u=1684598772,1969123139&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
        "https://img1.baidu.com/it/u=3457625930,3138307770&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500",
        "https://img0.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
        "https://img2.autotimes.com.cn/news/2021/10/1011_171448907707.jpg",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5e5cf9d0-e396-4620-88a0-d44a1b9298f4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684896739&t=8c4cabbc7503378703d28497e8129991",
    ]
    const [ximg, setXimg] = useState('')
    const [xinp, setXinp] = useState('')
    const [conlist, setConlist] = useState([])
    const [stcc, setStcc] = useState(2)
    const [iid, setIid] = useState(-1)
    //选择照片
    const xuan = (con, ind) => {

        setXimg(con)
        setIid(ind)
    }
    //输入框
    const xuaninp = (con) => {
        // console.log('con', con)
        setXinp(con)
        // if (ximg != '') {
        //     setStcc(1)
        // }
    }
    //提交
    const addlist = (e) => {
        // console.log('ximg,xinp', ximg, xinp)
        console.log('e', e)
        let con = conlist
        if (con.length >= 4) {
            alert("数量超出")
        } else {
            con.push({ img: ximg, con: xinp, id: new Date().getTime(),xm:Math.random()*(355-100),ym:Math.random()*(350-120) })
            setConlist(con)
            setStcc(2)
            setIid(-1)

        }
        setXimg('')
        setXinp('')

    }

    //删除
    const delcon = (did) => {
        console.log('did', did)
        let list = [...conlist]
        let ind = list.findIndex(item => item.id == did)
        console.log('ind', ind)
        list.splice(ind, 1)
        setConlist(list)
    }
    const [sid, setSid] = useState(false)
    const [kid, setKid] = useState(0)
    //回填
    const showconed = (con) => {
        console.log('con', con, conlist)
        setKid(con.id)
        let ind = imglist.findIndex(item => item == con.img)
        console.log('indssss', ind)
        setIid(ind)
        setSid(!sid)
        setXimg(con.img)
        setXinp(con.con)

    }
    //修改
    const upcon = () => {
        let list = [...conlist]
        setIid(-1)
        let ind = list.findIndex(item => item.id == kid)
        console.log('key', list, ind)
        list[ind].con = xinp
        list[ind].img = ximg
        setConlist(list)
        setXimg('')
        setXinp('')
        setSid(!sid)
    }
    const dragcon = () => {
        console.log("111");
    }
    console.log('conslist', conlist)
    const dragstart = (e) => {
        console.log('e', e)
    }
    const draged = () => {
        console.log("结束");
    }
    return (
        <div>
            <div className='matop'>
                许愿墙
            </div>
            <div className='macon'>
                <input value={xinp} onChange={(e) => xuaninp(e.target.value)} />
                <div className='mimg'>
                    {imglist.map((item, index) => {
                        return (
                            <img key={index} src={item} style={{ border: iid == index ? "2px solid red" : "" }} onClick={() => xuan(item, index)} />
                        )
                    })}


                </div>
                {xinp === '' && ximg === '' ? (<div className='ss' disabled={!stcc} >
                    再想想
                </div>) : (
                    !sid ? (<div className='xy' onClick={(e)=>addlist(e)}>
                        许愿
                    </div>) : (<div className='up' onClick={upcon}>
                        修改
                    </div>)
                )}
            </div>
            <div className='malist'>
                {conlist.map(item => {
                    return (
                        <DraggAble key={item.id} defaultPosition={{x:Math.random()*100,y:Math.random()*100}}>
                            <div className='maitem'  >
                                <span className='con'>{item.con}</span>
                                <img src={item.img} onDoubleClick={() => showconed(item)} />
                                <span className='del' onClick={() => delcon(item.id)}>×</span>
                            </div>
                        </DraggAble>
                    )
                })}
            </div>
        </div>
    )
}