Draggable Example

Create draggable button with React.

import { store, draggable } from "@dflex/dnd";

const DraggableButton = () => {
  const id = "draggable-button";

  // Create Shared dragged event holder
  let draggedEvent;

  // This reference enable DFlex to move the element when required.
  const ref = React.createRef();

  React.useEffect(() => {
    // Wait until component is mounted to get the reference
    if (ref) {
      store.register({ id, ref: ref.current });
      // All the following inputs work fine:
      // store.register({ ref: ref.current });
      // store.register({ id });
    }
  }, [ref]);

  React.useEffect(() => {
    return () => {
      // Clear element from the store when unmounted.
      store.unregister(id);
    };
  }, []);

  const onMouseMove = (e) => {
    if (draggedEvent) {
      const { clientX, clientY } = e;

      // Drag when mouse is moving!
      draggedEvent.dragAt(clientX, clientY);
    }
  };

  const onMouseUp = () => {
    if (draggedEvent) {
      draggedEvent.endDragging();
      draggedEvent = null;

      document.removeEventListener("mouseup", onMouseUp);
      document.removeEventListener("mousemove", onMouseMove);
    }
  };

  const onMouseDown = (e) => {
    const { button, clientX, clientY } = e;

    // Avoid right mouse click and ensure id
    if (typeof button === "number" && button === 0) {
      if (id) {
        // Create Draggable instance
        draggedEvent = new Draggable(id, { x: clientX, y: clientY });

        // Add event listeners to the entire document. Not just the button boundaries.
        document.addEventListener("mouseup", onMouseUp);
        document.addEventListener("mousemove", onMouseMove);
      }
    }
  };

  return (
    <button ref={ref} id={id} type="button" onMouseDown={onMouseDown}>
      Drag me!
    </button>
  );
};