React 拖动进入购物车

最新推荐文章于 2024-08-23 23:20:13 发布

成熟渊

最新推荐文章于 2024-08-23 23:20:13 发布

阅读量54

点赞数

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/Kmnyed/article/details/131157936

版权

该代码段展示了一个使用React编写的组件，功能涉及拖放图片至购物车。组件利用useState管理状态，包括图片列表(imglist)、选中项(sid)和购物车内容(shoplist)。通过onDragStart、onDragOver和onDragEnd事件处理函数，实现了将图片拖入购物车并计数的效果。

摘要由CSDN通过智能技术生成

import React, { useState } from 'react'
import "../css/tshoped.css"
export default function Tshoped() {
    const imglist = [
        { id: 1, con: "华山", img: "https://img1.baidu.com/it/u=1684598772,1969123139&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" },
        { id: 2, con: "灯笼", img: "https://img1.baidu.com/it/u=3457625930,3138307770&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500" },
        { id: 3, con: "夕阳", img: "https://img0.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" },
        { id: 4, con: "汽车", img: "https://img2.autotimes.com.cn/news/2021/10/1011_171448907707.jpg" },

        { id: 5, con: "草原", img: "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 [shoplist, setShoplist] = useState([])

    const [sid,setSid]=useState(-1)
    const [scon,setScon]=useState({})

    const mstart=(e,item)=>{
        
        console.log('e',e.target, e.clientX,e.clientY)
        
        // setSid(id)
        // box.addEventListener('mousemove', function() {
        //     console.log("移动");
        // })

        let cart=document.getElementById("tcon")
        console.log('cart', cart.offsetLeft)
        let cartnum=cart.offsetLeft
        
        setScon({...item,num:1})
    }
    const moveed=(e)=>{
        // console.log('sid', sid)
        // let box=document.getElementById(sid)
        // console.log('box', box.offsetLeft)
        e.preventDefault()
        console.log('esss',e, e.clientX,e.clientY)
        let xnum=e.clientX
        if(xnum>=1150){
            setSid(11)
        }else{
            setSid(-1)
        }
    }
    const monout=()=>{
        if(sid==11){
            let slist=shoplist
            let ind=slist.findIndex(item=>item.id==scon.id)
            if(ind!=-1){
                slist[ind].num+=1
                setShoplist(slist)
            }else{
                slist.push(scon)
                setShoplist(slist)
            }
           
            setSid(-1)
        }
        console.log("jisu");
    }
    return (
        <div className='tshop' onDragOver={moveed} onDragEnd={monout}>

            <div className='msimg' >
                {imglist.map(item => {
                    return (
                        <div key={item.id} id={item.id} onDragStart={(e)=>mstart(e,item)} className="citem"   style={{ transform: `translate(${item.x}px, ${item.y}px)` }}>
                            <img src={item.img} />
                            <p>{item.con}</p>
                        </div>
                    )
                })}
            </div>
            <div className='tcon' id="tcon">
                <h2>购物车</h2>
                {shoplist.map((item,ind) => {
                    return (
                        <div key={ind} className="icon">
                            <div className='iimg'>
                                <img src={item.img} />
                            </div>
                            <span>{item.con}</span>
                            <span>{item.num}</span>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

个人总结，bug勿怪