Make Drag & Drop + DropZone with interact.js + reactjs

import React from "react";
import interact from "interactjs";

type Partial<T> = {
  [P in keyof T]?: T[P];
};

const initialPosition = {
  width: 100,
  height: 100,
  x: 0,
  y: 225
};

export const useDraggable = (
  position: Partial<typeof initialPosition> = initialPosition
) => {
  const [elementPosition, setElementPosition] = React.useState<
    typeof initialPosition
  >({
    ...initialPosition,
    ...position
  });

  const [isEnabled, setIsEnabled] = React.useState<boolean>(true);

  const interactiveRef = React.useRef(null);

  let { x, y, width, height } = elementPosition;

  const enable = () => {
    interact((interactiveRef.current as unknown) as HTMLElement)
      .draggable({
        modifiers: [],
        inertia: false
      })
      .on("dragmove", (event) => {
        x += event.dx;
        y += event.dy;

        setElementPosition({
          width,
          height,
          x,
          y
        });
      });
  };

  const disable = () => {
    interact((interactiveRef.current as unknown) as HTMLElement).unset();
  };

  React.useEffect(() => {
    if (isEnabled) {
      enable();
    } else {
      disable();
    }
    return disable;
  }, [isEnabled]);

  return {
    ref: interactiveRef,
    style: {
      transform: `translate3D(${elementPosition.x}px, ${elementPosition.y}px, 0)`,
      width: `${elementPosition.width}px`,
      height: `${elementPosition.height}px`,
      position: "absolute" as React.CSSProperties["position"],
      touchAction: "none"
    },
    position: elementPosition,
    isEnabled,
    enable: () => setIsEnabled(true),
    disable: () => setIsEnabled(false)
  };
};

import { useRef } from "react";
import interact from "interactjs";
import "./styles.css";
import { useDraggable } from "./hooks/useDraggable";

export default function App() {
  const targetRef = useRef(null);
  const draggable = useDraggable();

  // dropzone
  if (targetRef?.current) {
    interact((targetRef.current as unknown) as HTMLElement)
      .dropzone({
        accept: ".test",
        overlap: 0.75
      })

      .on("dropactivate", (event: Interact.InteractEvent) => {
        event.target.classList.add("drop-active");
      })

      .on("dragenter", (event: Interact.InteractEvent) => {
        console.log("dragenter");
        const draggableElement = event.relatedTarget;
        const dropzoneElement = event.target;
        dropzoneElement.classList.add("drop-target");
        draggableElement?.classList.add("can-drop");
        if (draggableElement) {
          draggableElement.style.color = "#fff";
          draggableElement.textContent = "release me";
        }
      })

      .on("dragleave", (event: Interact.InteractEvent) => {
        const draggableElement = event.relatedTarget;
        const dropzoneElement = event.target;
        dropzoneElement.classList.remove("drop-target");
        draggableElement?.classList.remove("can-drop");
        if (draggableElement) {
          draggableElement.textContent = "dragging me";
        }
      })

      .on("drop", (event: Interact.InteractEvent) => {
        const draggableElement = event.relatedTarget;
        if (draggableElement) {
          draggableElement.style.color = "#fff";
          draggableElement.textContent = "hello world";
        }
      })

      .on("dropdeactivate", (event: Interact.InteractEvent) => {
        event.target.classList.remove("drop-active");
        event.target.classList.remove("drop-target");
      });
  }

  return (
    <div className="App">
      <h1>interactjs samples</h1>
      <div className="test" ref={draggable.ref} style={draggable.style}>
        <p>drag me</p>
        <p>
          {`x: ${draggable.position.x.toFixed(0)}`}
          {`y: ${draggable.position.y.toFixed(0)}`}
        </p>
      </div>
      <div className="dropzone" ref={targetRef}>
        dropzone
      </div>
    </div>
  );
}