

react-dndを使いたいと思って書いたのですが、一度ドラッグして移動した後に再びドラッグする事が出来ないです。  
詳しい方見て頂けないでしょうか？宜しくお願い致します。動く物はcodesandboxに上げてあります。

App.js

[code]

    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>
      );
    };
    
    
    
[/code]

`end:` の中でstateを切り替えるのがいけないのかそこが実行されるとドラッグ出来なくなります。 `button`
でも切り替えの場合はドラッグ出来ます。

参考記事  
<https://medium.com/litslink/react-dnd-in-examples-ce509b25839d>

[codeSandBox](https://codesandbox.io/s/flamboyant-
newton-m2nxx?file=/src/App.js)


CC BY-SA 4.0
2022-02-06T08:31:26.887
86172
2022-02-06T13:04:30.417
2022-02-06T08:57:50.817
22565
22565
question
javascript reactjs
react-dndで一度ドラッグしたアイテムを再びドラッグ出来ないです。


`react-dnd-html5`の version を下げたら動作しました。15.0.0 to 14.1.0.  
react-dnd version 15.0.0 and react-dnd-html5 version 14.1.0 works well.


CC BY-SA 4.0
2022-02-06T13:04:30.417
86176
2022-02-06T13:04:30.417
22565
86172
answer