react-dndを使いたいと思って書いたのですが、一度ドラッグして移動した後に再びドラッグする事が出来ないです。
詳しい方見て頂けないでしょうか?宜しくお願い致します。動く物はcodesandboxに上げてあります。
App.js
import React, { useRef, useState } from "react";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import "./styles.css";
const MovableItem = ({ setIsFirstColumn, name }) => {
const [{ isDragging }, drag] = useDrag({
type: "what",
item: { name },
// ドラッグが離された時に動作する
end: (item, monitor) => {
const dropResult = monitor.getDropResult();
console.log("最初", dropResult);
// Column 1の上で離すとnameにColumn 1が入るそしてtrueになる
// それ以外ではundefinedになる
if (dropResult && dropResult.name === "Column 1") {
console.log("カラム1へ");
setIsFirstColumn(true);
} else {
console.log("カラム2へ");
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 [{ canDrop, isOver }, drop] = useDrop({
// カラムにwhatタイプの移動を許可する
accept: "what",
// コンポーネントを落とせる場所を指定する
drop: () => ({ name: title }),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
canDrop: !!monitor.canDrop()
})
});
console.log("options", { canDrop, isOver });
return (
<div ref={drop} className={className}>
{title}
{children}
</div>
);
};
export const App = () => {
const [isFirstColumn, setIsFirstColumn] = useState(true);
const Item = (
<MovableItem setIsFirstColumn={setIsFirstColumn} name={"hello"} />
);
return (
<div className="container">
<DndProvider backend={HTML5Backend}>
<Column title="Column 1" className="column first-column">
{/*ステートがtrueならドラッグするコンポーネントを渡す */}
{isFirstColumn && Item}
</Column>
<Column title="Column 2" className="column second-column">
{console.log("haha", isFirstColumn)}
{!isFirstColumn && Item}
</Column>
<button
onClick={() => {
setIsFirstColumn(!isFirstColumn);
}}
>
切り替え
</button>
</DndProvider>
</div>
);
};
end:
の中でstateを切り替えるのがいけないのかそこが実行されるとドラッグ出来なくなります。 button
でも切り替えの場合はドラッグ出来ます。
参考記事
https://medium.com/litslink/react-dnd-in-examples-ce509b25839d