0

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

codeSandBox

1 件の回答 1

0

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.

2

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。