Drag and Drop

React JS

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [currentZone, setCurrentZone] = useState("A");

  const handleDragStart = (event) => {
    // Set the dataTransfer object with the id of the element being dragged
    event.dataTransfer.setData("text", event.target.id);
  };

  const handleDrop = (event, newZone) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text");
    const draggableElement = document.getElementById(data);

    try {
      // Check if the new dropzone is empty before moving the element
      if (currentZone !== newZone) {
        setCurrentZone(newZone);
      } else {
        throw new Error("The element is already in this zone");
      }
    } catch (error) {
      console.error("Error during drop operation:", error);
    }
  };

  const allowDrop = (event) => {
    event.preventDefault();
  };

  return (
    <div className="container">
      <div
        id="pointA"
        className="dropzone"
        onDrop={(event) => handleDrop(event, "A")}
        onDragOver={allowDrop}
      >
        {currentZone === "A" && (
          <div
            id="draggable"
            className="draggable"
            draggable="true"
            onDragStart={handleDragStart}
          >
            Object
          </div>
        )}
      </div>

      <div
        id="pointB"
        className="dropzone"
        onDrop={(event) => handleDrop(event, "B")}
        onDragOver={allowDrop}
      >
        {currentZone === "B" && (
          <div
            id="draggable"
            className="draggable"
            draggable="true"
            onDragStart={handleDragStart}
          >
            Object
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

CSS Drag And Drop

React TS

import React, { useState } from "react";
import "./styles.css";

const App: React.FC = () => {
  // Define the state for tracking the current dropzone
  const [currentZone, setCurrentZone] = useState<"A" | "B">("A");

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    // Set the dataTransfer object with the id of the element being dragged
    event.dataTransfer.setData("text", event.currentTarget.id);
  };

  const handleDrop = (
    event: React.DragEvent<HTMLDivElement>,
    newZone: "A" | "B",
  ) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text");
    const draggableElement = document.getElementById(data);

    try {
      // Check if the new dropzone is different before moving the element
      if (draggableElement && currentZone !== newZone) {
        setCurrentZone(newZone);
      } else {
        throw new Error(
          "The element is already in this zone or draggable element not found",
        );
      }
    } catch (error) {
      console.error("Error during drop operation:", error);
    }
  };

  const allowDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

  return (
    <div className="container">
      <div
        id="pointA"
        className="dropzone"
        onDrop={(event) => handleDrop(event, "A")}
        onDragOver={allowDrop}
      >
        {currentZone === "A" && (
          <div
            id="draggable"
            className="draggable"
            draggable="true"
            onDragStart={handleDragStart}
          >
            Object
          </div>
        )}
      </div>

      <div
        id="pointB"
        className="dropzone"
        onDrop={(event) => handleDrop(event, "B")}
        onDragOver={allowDrop}
      >
        {currentZone === "B" && (
          <div
            id="draggable"
            className="draggable"
            draggable="true"
            onDragStart={handleDragStart}
          >
            Object
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

CSS Drag And Drop