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勿怪