hooks手动实现拖拽组件

hooks手动实现拖拽组件

在这里插入图片描述

App.js组件

import React from "react";

import './App.css';
import useDraggable from './useDraggable';

// 数据源
const list = [
  {
   
   
    src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3942751454,1089199356&fm=26&gp=0.jpg',
    title: '图片1'
  },
  {
   
   
    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604224186531&di=528125c9c6c2ab7f5dd0f4f108704408&imgtype=0&src=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201306%2F26%2F20130626161523_zw25t.jpeg',
    title: '图片2'
  },
  {
   
   
    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604224186529&di=31915ae6ab56c476bd2308e1e320c76f&imgtype=0&src=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201301%2F20%2F20130120171927_KaevQ.jpeg',
    title: '图片3'
  }
];
//处理样式
function cls(def, ...conditions) {
   
   
  const list = [def];
  conditions.forEach(cond => {
   
   
    if (cond[0]) {
   
   
      list.push(cond[1]);
    }
  })
  console.log(list);
  return list.join(' ')
}

// 默认导出组件
export default function App() {
   
   
  return (
    <div className='App'>
      <DraggableList list={
   
   list} />
    </div>
  )
}

function DraggableList({
   
    list }) {
   
   
  const {
   
    dragList, createDropperProps, createDraggerProps } = useDraggable(list);
  console.log(dragList);
  return dragList.map((item, i) => {
   
   
    if (item.type === 'BAR'
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值