SVG Drag and Drop with React Hooks

svg-drag.js

import React from "react";
import ReactDOM from "react-dom";

const Circle = () => {
  const [position, setPosition] = React.useState({
    x: 100,
    y: 100,
    active: false,
    offset: { }
  });

  const handlePointerDown = e => {
    const el = e.target;
    const bbox = e.target.getBoundingClientRect();
    const x = e.clientX - bbox.left;
    const y = e.clientY - bbox.top;
    el.setPointerCapture(e.pointerId);
    setPosition({
      ...position,
      active: true,
      offset: {
        x,
        y
      }
    });
  };
  const handlePointerMove = e => {
    const bbox = e.target.getBoundingClientRect();
    const x = e.clientX - bbox.left;
    const y = e.clientY - bbox.top;
    if (position.active) {
      setPosition({
        ...position,
        x: position.x - (position.offset.x - x),
        y: position.y - (position.offset.y - y)
      });
    }
  };
  const handlePointerUp = e => {
    setPosition({
      ...position,
      active: false
    });
  };

  return (
    <circle
      cx={position.x}
      cy={position.y}
      r={50}
      onPointerDown={handlePointerDown}
      onPointerUp={handlePointerUp}
      onPointerMove={handlePointerMove}
      fill={position.active ? "blue" : "black"}
    />
  );
};

function App() {
  return (
    <svg viewBox="0 0 400 400" width="400" height="400">
      <Circle />
    </svg>
  );
}

const Application = () => {
  return (
    <div>
      <h1>Drag Me</h1>
      <App />
    </div>
  );
};

ReactDOM.render(<Application />, document.getElementById("app"));

Hi two years later 😄

You code snippets helped me immensely and I thank you for it! I tried making improvements like allowing the ratio between the svg viewport and the window viewport to not be 1:1 and to position it elsewhere in the window. Also making the selected rect come on top of the others. It works pretty well except when moving the cursor too fast, if it exits the rect then the rect stops moving. I thought the setPointerCapture method was supposed to prevent that but I can't get it to work. It seems like the issue come from the reordering of the elements in the array. @hashrock your example doesn't have this issue.

Here's the code :

"use client";

import { useState } from "react";

interface DragElement {
  x: number;
  y: number;
  width: number;
  height: number;
  active: boolean;
  xOffset: number;
  yOffset: number;
  key: string;
}

const windowViewportToSVGViewport = (
  elBBox: DOMRect,
  svgViewbox: DOMRect,
  svgBBox: DOMRect
): DOMRect => {
  const ratio = {
    x: svgViewbox.width / svgBBox.width,
    y: svgViewbox.height / svgBBox.height,
  };
  const x = svgViewbox.x + (elBBox.x - svgBBox.x) * ratio.x;
  const y = svgViewbox.y + (elBBox.y - svgBBox.y) * ratio.y;
  const width = elBBox.width * ratio.x;
  const height = elBBox.height * ratio.y;

  return DOMRect.fromRect({ x, y, width, height });
};

export default function TestDrag({}: {}) {
  const [elements, setElements] = useState<DragElement[]>([
    {
      x: 0,
      y: 0,
      width: 100,
      height: 200,
      active: false,
      xOffset: 0,
      yOffset: 0,
      key: "0",
    },
    {
      x: -100,
      y: -100,
      width: 100,
      height: 100,
      active: false,
      xOffset: 0,
      yOffset: 0,
      key: "1",
    },
    {
      x: -50,
      y: 100,
      width: 150,
      height: 200,
      active: false,
      xOffset: 0,
      yOffset: 0,
      key: "2",
    },
    {
      x: 200,
      y: 250,
      width: 50,
      height: 50,
      active: false,
      xOffset: 0,
      yOffset: 0,
      key: "3",
    },
  ]);

  function handlePointerDown(
    index1: number,
    e: React.PointerEvent<SVGElement>
  ) {
    let newElements = elements.map(function (item, index2): DragElement {
      if (index1 === index2) {
        const el = e.currentTarget;
        const elBBox = el.getBoundingClientRect();
        const svgViewbox = (e.target as SVGElement).ownerSVGElement?.viewBox
          .baseVal;
        const svgBBox = (
          e.target as SVGElement
        ).ownerSVGElement?.getBoundingClientRect();

        if (!svgViewbox || !svgBBox) return item;

        const { x, y, width, height } = windowViewportToSVGViewport(
          elBBox,
          svgViewbox,
          svgBBox
        );
        const cursorPosition = { x: e.clientX, y: e.clientY };
        const { x: cursorSvgPositionX, y: cursorSvgPositionY } =
          windowViewportToSVGViewport(
            DOMRect.fromRect(cursorPosition),
            svgViewbox,
            svgBBox
          );
        el.setPointerCapture(e.pointerId);

        return {
          ...item,
          xOffset: cursorSvgPositionX - x,
          yOffset: cursorSvgPositionY - y,
          active: true,
        };
      }
      return item;
    });

    // Move the element to the top of the array
    const el = newElements.splice(index1, 1)[0];
    newElements.push(el);

    setElements(newElements);
  }

  function handlePointerMove(
    index1: number,
    e: React.PointerEvent<SVGElement>
  ) {
    let newElements = elements.map(function (item, index2): DragElement {
      if (index1 === index2 && item.active === true) {
        const svgViewbox = (e.target as SVGElement).ownerSVGElement?.viewBox
          .baseVal;
        const svgBBox = (
          e.target as SVGElement
        ).ownerSVGElement?.getBoundingClientRect();

        if (!svgViewbox || !svgBBox) return item;

        const cursorPosition = { x: e.clientX, y: e.clientY };
        const { x: cursorSvgPositionX, y: cursorSvgPositionY } =
          windowViewportToSVGViewport(
            DOMRect.fromRect(cursorPosition),
            svgViewbox,
            svgBBox
          );

        return {
          ...item,
          x: cursorSvgPositionX - item.xOffset,
          y: cursorSvgPositionY - item.yOffset,
        };
      }
      return item;
    });
    setElements(newElements);
  }

  function handlePointerUp(index1: number, e: React.PointerEvent<SVGElement>) {
    let newElements = elements.map(function (item, index2): DragElement {
      if (index1 === index2) {
        return { ...item, active: false };
      }
      return item;
    });

    setElements(newElements);
  }

  const rectElements = elements.map(function (item, index) {
    return (
      <rect
        key={item.key}
        x={item.x}
        y={item.y}
        fill="yellow"
        stroke="blue"
        width={item.width}
        height={item.height}
        onPointerDown={(evt) => handlePointerDown(index, evt)}
        onPointerUp={(evt) => handlePointerUp(index, evt)}
        onPointerMove={(evt) => handlePointerMove(index, evt)}
      />
    );
  });

  return (
    <svg
      width={800}
      height={800}
      viewBox="-100 -100 400 400"
      style={{
        backgroundColor: "#ff0000",
        position: "absolute",
        left: 50,
        top: 50,
      }}
    >
      {rectElements}
    </svg>
  );
}

If anyone stumbles upon this, I'd greatly appreciate some help.

Thanks !

I found a quite convoluted fix. The issue came from the reordering of elements. Using a useEffect to trigger setPointerCapture after the redraw solve the problem but is quite ugly imo. Let me know if you know any better workaround.

"use client";

import { useEffect, useState } from "react";

interface DragElement {
  x: number;
  y: number;
  width: number;
  height: number;
  active: boolean;
  xOffset: number;
  yOffset: number;
  key: string;
  htmlElement?: SVGElement;
  pointerId?: number;
}

const windowViewportToSVGViewport = (
  elBBox: DOMRect,
  svgViewbox: DOMRect,
  svgBBox: DOMRect
): DOMRect => {
  const ratio = {
    x: svgViewbox.width / svgBBox.width,
    y: svgViewbox.height / svgBBox.height,
  };
  const x = svgViewbox.x + (elBBox.x - svgBBox.x) * ratio.x;
  const y = svgViewbox.y + (elBBox.y - svgBBox.y) * ratio.y;
  const width = elBBox.width * ratio.x;
  const height = elBBox.height * ratio.y;

  return DOMRect.fromRect({ x, y, width, height });
};

export default function TestDrag({}: {}) {
  const [elements, setElements] = useState<DragElement[]>([
    {
      x: 0,
      y: 0,
      width: 100,
      height: 200,
      active: false,
      xOffset: 0,
      yOffset: 0,
      key: "0",
    },
    {
      x: -100,
      y: -100,
      width: 100,
      height: 100,
      active: false,
      xOffset: 0,
      yOffset: 0,
      key: "1",
    },
    {
      x: -50,
      y: 100,
      width: 150,
      height: 200,
      active: false,
      xOffset: 0,
      yOffset: 0,
      key: "2",
    },
    {
      x: 200,
      y: 250,
      width: 50,
      height: 50,
      active: false,
      xOffset: 0,
      yOffset: 0,
      key: "3",
    },
  ]);

  useEffect(() => {
    elements.forEach((element) => {
      if (
        element.active &&
        element.htmlElement !== undefined &&
        element.pointerId !== undefined
      )
        element.htmlElement.setPointerCapture(element.pointerId);
    });
  }, [elements]);

  function handlePointerDown(
    index1: number,
    e: React.PointerEvent<SVGElement>
  ) {
    let newElements = elements.map(function (item, index2): DragElement {
      if (index1 === index2) {
        const el = e.currentTarget as SVGElement;
        const elBBox = el.getBoundingClientRect();
        const svgViewbox = (e.target as SVGElement).ownerSVGElement?.viewBox
          .baseVal;
        const svgBBox = (
          e.target as SVGElement
        ).ownerSVGElement?.getBoundingClientRect();

        if (!svgViewbox || !svgBBox) return item;

        const { x, y, width, height } = windowViewportToSVGViewport(
          elBBox,
          svgViewbox,
          svgBBox
        );
        const cursorPosition = { x: e.clientX, y: e.clientY };
        const { x: cursorSvgPositionX, y: cursorSvgPositionY } =
          windowViewportToSVGViewport(
            DOMRect.fromRect(cursorPosition),
            svgViewbox,
            svgBBox
          );

        return {
          ...item,
          xOffset: cursorSvgPositionX - x,
          yOffset: cursorSvgPositionY - y,
          active: true,
          htmlElement: el,
          pointerId: e.pointerId,
        };
      }
      return item;
    });

    // Move the element to the top of the array
    const el = newElements.splice(index1, 1)[0];
    newElements.push(el);

    setElements(newElements);
  }

  function handlePointerMove(
    index1: number,
    e: React.PointerEvent<SVGElement>
  ) {
    let newElements = elements.map(function (item, index2): DragElement {
      if (index1 === index2 && item.active === true) {
        const svgViewbox = (e.target as SVGElement).ownerSVGElement?.viewBox
          .baseVal;
        const svgBBox = (
          e.target as SVGElement
        ).ownerSVGElement?.getBoundingClientRect();

        if (!svgViewbox || !svgBBox) return item;

        const cursorPosition = { x: e.clientX, y: e.clientY };
        const { x: cursorSvgPositionX, y: cursorSvgPositionY } =
          windowViewportToSVGViewport(
            DOMRect.fromRect(cursorPosition),
            svgViewbox,
            svgBBox
          );

        return {
          ...item,
          x: cursorSvgPositionX - item.xOffset,
          y: cursorSvgPositionY - item.yOffset,
        };
      }
      return item;
    });
    setElements(newElements);
  }

  function handlePointerUp(index1: number, e: React.PointerEvent<SVGElement>) {
    let newElements = elements.map(function (item, index2): DragElement {
      if (index1 === index2) {
        return { ...item, active: false };
      }
      return item;
    });

    setElements(newElements);
  }

  const rectElements = elements.map(function (item, index) {
    return (
      <rect
        key={item.key}
        x={item.x}
        y={item.y}
        z={-index}
        fill="yellow"
        stroke="blue"
        width={item.width}
        height={item.height}
        onPointerDown={(evt) => handlePointerDown(index, evt)}
        onPointerUp={(evt) => handlePointerUp(index, evt)}
        onPointerMove={(evt) => handlePointerMove(index, evt)}
      />
    );
  });

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={800}
      height={800}
      viewBox="-100 -100 400 400"
      style={{
        backgroundColor: "#ff0000",
        position: "absolute",
        left: 50,
        top: 50,
      }}
    >
      {rectElements}
    </svg>
  );
}

@Minious
That's right, when you rearrange elements during a drag operation, you lose the reference to the DOM.
The rearrangement should be done when the dragging is finished.

If it were me, I would probably just render the object coming to the forefront twice.

  return (
    <svg
      width={800}
      height={800}
      viewBox="-100 -100 400 400"
      style={{
        backgroundColor: "#ff0000",
        position: "absolute",
        left: 50,
        top: 50,
      }}
    >
      {rectElements}
      {elements.filter((item) => item.active === true).map((item) => {
        return (
          <rect
            key="active"
            x={item.x}
            y={item.y}
            fill="yellow"
            stroke="white"
            width={item.width}
            height={item.height}
            style={{ pointerEvents: "none" }}
          />
        );
      }
      )}
    </svg>
  );

I often use techniques to create a UI layer that is just for appearance and disconnected from the actual contents. By using pointer-events: none, it is possible to make events transparent.

https://dev.to/hashrock/writing-spreadsheet-with-svg-and-vuejs--23ed