拖拽加入购物车小案例-react

//下载拖拽组件
npm install react-draggable
// 引入拖拽插件
import Draggable from 'react-draggable';
//用Draggable包裹想要拖拽的div,并设置拖拽范围
import Draggable from 'react-draggable';
export default function IndexPage() {
  return (
    <div>
      {/* 给他设置一个父级 */}
      <div className="container">
        <Draggable >
          <div className="item" 
		  bounds={{right: 1500, left: 0,top:0,bottom:500} } //设置拖拽范围
		  >
            ......content.....
          </div>
        </Draggable>
      </div>
    </div>
  );
}
//Draggable常用的props
allowAnyClick: boolean // 默认false，设为true非左键可实现点击拖拽
axis: string // 'x'：x轴方向拖拽、'y'：y轴方向拖拽、'none'：禁止拖拽
bounds: { left: number, top: number, right: number, bottom: number } | string 
    // 限定移动的边界，接受值：
    //（1）'parent':在移动元素的offsetParent范围内
    //（2）一个选择器，在指定的Dom节点内
    //（3）{ left: number, top: number, right: number, bottom: number }对象，限定每个方向可以移动的距离
cancel：制定给一个选择器组织drag初始化，例如'.body'
defaultClassName：string // 拖拽ui类名，默认'react-draggable'
drfaultClassNameDragging：string // 正在拖拽ui类名，默认'eact-draggable-dragging'
defaultClassNameDragged：string //拖拽后的类名，默认'react-draggable-dragged'
defaultPosition：{ x: number, y: number } // 起始x和y的位置
disabled：boolean // true禁止拖拽任何元素
grid：[number, number] // 正在拖拽的网格范围
handle：string // 初始拖拽的的选择器'.handle'
offsetParent：HTMLElement // 拖拽的offsetParent
onMouseDown: (e: MouseEvent) => void // 鼠标按下的回调
onStart: DraggableEventHandler // 开始拖拽的回调
onDrag：DraggableEventHandler // 拖拽时的回调
onStop：DraggableEventHandler // 拖拽结束的回调
position: {x: number, y: number} // 控制元素的位置
positionOffset: {x: number | string, y: number | string} // 相对于起始位置的偏移
scale：number // 定义拖拽元素的缩放


//完整代码

import React,{useState} from 'react'
// 引入拖拽插件
import Draggable from 'react-draggable';
export default function Index() {
  const [list,setList]=useState([
    {id:1,img:'https://img.pddpic.com/gaudit-image/2023-04-09/f2b243c7b12463696a4440104cee20aa.jpeg',name:'AAA',price:25},
    {id:2,img:'https://img.pddpic.com/gaudit-image/2023-02-25/353fa92ae2b098b42695a90d65d6d2ee.jpeg',name:'BBB',price:25},
    {id:3,img:'https://img.pddpic.com/gaudit-image/2023-02-25/353fa92ae2b098b42695a90d65d6d2ee.jpeg',name:'CCC',price:25},
    {id:4,img:'https://img.pddpic.com/gaudit-image/2022-12-12/11b2f58d2b63779d842791bf096a33ec.jpeg',name:'DDD',price:25},
    {id:5,img:'https://img.pddpic.com/gaudit-image/2023-04-28/12aca71390cf5439eeba6455f3879600.jpeg',name:'EEE',price:25},
    {id:6,img:'https://img.pddpic.com/gaudit-image/2023-04-06/8c94a99e19f8b5071fda56fc050b58cf.jpeg',name:'FFF',price:25},
    // {id:7,img:'https://img.pddpic.com/gaudit-image/2022-12-12/11b2f58d2b63779d842791bf096a33ec.jpeg',name:'GGG',price:25},
    // {id:8,img:'https://img.pddpic.com/gaudit-image/2023-04-28/12aca71390cf5439eeba6455f3879600.jpeg',name:'HHH',price:25},
    // {id:9,img:'https://img.pddpic.com/gaudit-image/2023-04-06/8c94a99e19f8b5071fda56fc050b58cf.jpeg',name:'III',price:25},
  ])

  const [car,setCar]=useState([])
  const [items,setItems]=useState({})

  function start(item){
    console.log(item,'111');
    setItems(item)
  }

  function end(i){
    console.log(222);
    console.log(i,'ttttt');
    const idx=car.findIndex(item=>item.id==i.id)
    if(idx==-1){
      let arr=[...car]
      arr.push({...items,num:1})
      setCar(arr)
    }else{
      let arr=[...car]
      arr[idx].num++
      setCar(arr)
    }
  }

  return (
    <div style={{width:'100%',height:'100%',display:'flex'}}>
      <div style={{flex:'0.7',height:'100%',padding:'10px 10px',boxSizing:'border-box',display:'flex',flexWrap:'wrap'}}>
        {
          list.map(item=><Draggable 
            bounds={{right: 1500, left: 0,top:0,bottom:500}} 
            onStart={()=>{start(item)}}
            onStop={()=>{end(item)}}
            >
            <div className='item' key={item.id} 
              style={{width:'170px',height:'235px',margin:'0 20px'}}>
              <img src={item.img} alt=""  style={{width:'170px',height:'180px',border:'1px solid black'}}/>
              <div style={{textAlign:'center',color:'#ccc'}}>{item.name}</div>
              <div style={{textAlign:'center',color:'#ccc'}}>${item.price}</div>
            </div>
          </Draggable>
          )
        }
        
      </div>
      <div style={{flex:'0.3',height:'100%',padding:'10px 10px',boxSizing:'border-box',background:'#ccc'}}>
        <div style={{textAlign:'center'}}>
            <h2>购物车</h2>
        </div>
        <div style={{marginTop:'20px',display:'flex',justifyContent:'center',alignItems:'center'}}>
          <table style={{width:'300px',border:'1px solid black'}}>
              <thead>
                <tr>
                  <th style={{border:'1px solid black'}}>名称</th>
                  <th style={{border:'1px solid black'}}>数量</th>
                  <th style={{border:'1px solid black'}}>单价</th>
                </tr>
              </thead>
              <tbody>
                {
                  car.map(item=>(
                    <tr key={item.id}>
                      <td style={{border:'1px solid black',textAlign:'center'}}>{item.name}</td>
                      <td style={{border:'1px solid black',textAlign:'center'}}>{item.num}</td>
                      <td style={{border:'1px solid black',textAlign:'center'}}>{item.price}</td>
                    </tr>
                  ))
                }
              </tbody>
          </table>
          
        </div>
        <div style={{marginLeft:'300px'}}>
          <span>合计：</span><span>{car.reduce((init,item)=>init+item.num*item.price,0)}</span>
        </div>  
      </div>  
    </div>
  )
}