React antd 拖拽组件

Ant Design 提供了一个 `Dragger` 组件来实现拖拽上传文件，但如果你想要实现拖拽组件的功能，可以使用 `react-dnd` 库来实现。

1. 安装 `react-dnd` 和 `react-dnd-html5-backend` 库：

   npm install --save react-dnd react-dnd-html5-backend

2. 创建一个可拖拽组件

   import React from 'react';
   import { DragSource } from 'react-dnd';

   const boxSource = {
     beginDrag(props) {
       return {
         name: props.name,
       };
     },
   };

   function collect(connect, monitor) {
     return {
       connectDragSource: connect.dragSource(),
       isDragging: monitor.isDragging(),
     };
   }

   class Box extends React.Component {
     render() {
       const { connectDragSource, isDragging } = this.props;
       const opacity = isDragging ? 0.4 : 1;

       return connectDragSource(
         <div style={{ ...style, opacity }}>
           {this.props.children}
         </div>
       );
     }
   }

   const style = {
     border: '1px dashed gray',
     padding: '0.5rem 1rem',
     marginBottom: '.5rem',
   };

   export default DragSource('box', boxSource, collect)(Box);

3. 创建一个可放置组件

   import React from 'react';
   import { DropTarget } from 'react-dnd';

   const boxTarget = {
     drop(props, monitor, component) {
       const item = monitor.getItem();

       component.setState({
         droppedBoxName: item.name,
       });
     },
   };

   function collect(connect, monitor) {
     return {
       connectDropTarget: connect.dropTarget(),
       isOver: monitor.isOver(),
       canDrop: monitor.canDrop(),
     };
   }

   class TargetBox extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         droppedBoxName: null,
       };
     }

     render() {
       const { canDrop, isOver, connectDropTarget } = this.props;
       const isActive = canDrop && isOver;
       const backgroundColor = isActive ? 'lightgreen' : '#FFF';

       return connectDropTarget(
         <div style={{ ...style, backgroundColor }}>
           {isActive ? 'Release to drop' : 'Drag item here'}
           <br />
           {this.state.droppedBoxName}
         </div>
       );
     }
   }

   const style = {
     height: '8rem',
     width: '8rem',
     marginRight: '1.5rem',
     marginBottom: '1.5rem',
     color: 'black',
     border: '1px solid black',
     textAlign: 'center',
     fontSize: '1rem',
     lineHeight: 'normal',
   };

   export default DropTarget('box', boxTarget, collect)(TargetBox);

4. 在组件中使用

   import React from 'react';
   import Box from './Box';
   import TargetBox from './TargetBox';

   class Container extends React.Component {
     render() {
       return (
         <div>
           <div style={{ overflow: 'hidden', clear: 'both' }}>
             <Box name="Glass" />
             <Box name="Banana" />
             <Box name="Paper" />
           </div>
           <div style={{ overflow: 'hidden', clear: 'both' }}>
             <TargetBox />
           </div>
         </div>
       );
     }
   }

   export default Container;

这样，你就可以在 `Box` 组件上拖拽并在 `TargetBox` 组件上放置了。