想要将组件从侧边栏拖动到仪表板但不从侧边栏删除项目

问题描述

import './App.css';
import { DndProvider,useDrag,useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const MovableItem = ({ setIsFirstColumn }) => {
    const [{ isDragging },drag] = useDrag({
        item: { name: 'Any custom name',type: 'Our first type' },end: (item,monitor) => {
            const dropResult = monitor.getDropResult();
            if (dropResult && dropResult.name === 'Column 1') {
                setIsFirstColumn(true)
            } else {
                setIsFirstColumn(false);
            }
        },collect: (monitor) => ({
            isDragging: monitor.isDragging(),}),});

    const opacity = isDragging ? 0.4 : 1;

    return (
        <div ref={drag} className='movable-item' style={{ opacity }}>
            We will move this item
        </div>
    )
}

const Column = ({ children,className,title }) => {
    const [,drop] = useDrop({
        accept: 'Our first type',drop: () => ({ name: title }),});

    return (
        <div ref={drop} className={className}>
            {title}
            {children}
        </div>
    ) 
}

const App = () => {
    const [isFirstColumn,setIsFirstColumn] = useState(true);
    const [isSecondColumn,setIsSecondColumn] = useState(true);

    const Item = <MovableItem setIsFirstColumn={setIsFirstColumn} />;

    return (
        <div className="container">
            {/* Wrap components that will be "draggable" and "droppable" */}
            <DndProvider backend={HTML5Backend}>
                <Column title='Column 1' className='column first-column'>
                    {isFirstColumn && Item}
                </Column>
                <Column title='Column 2' className='column second-column'>
                    {isFirstColumn && Item}
                </Column>
            </DndProvider>
        </div>
    );
}
export default App

说明 我基本上想从侧边栏拖动该项目并放到仪表板上以查看完整的组件，但是当我放到仪表板时，我不想从侧边栏删除它，我该如何使用react dnd做到这一点，或者有没有替代的 谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）