如何解决想要将组件从侧边栏拖动到仪表板但不从侧边栏删除项目
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 举报,一经查实,本站将立刻删除。