@joint/react
    Preparing search index...

    Function useCellDrag

    useCellDrag()

    • Tracks the live drag state of the current cell while the user drags it across the paper. Read isDragging to dim the element, or canDrop / dropArea to render a drop indicator. Use it inside a renderElement callback.

      Only the cell being dragged re-renders; every other cell receives a shared, frozen idle reference, so large diagrams stay cheap to render.

      Returns CellDragState

      the CellDragState scoped to the current cell

      import { Paper, useCellDrag } from '@joint/react';

      function MyElement({ label }: { label: string }) {
        const { isDragging } = useCellDrag();
        return (
          <div style={{ opacity: isDragging ? 0.5 : 1 }}>
            {label}
          </div>
        );
      }

      <Paper renderElement={(el) => <MyElement label={String(el.id)} />} />;

    Settings

    Member Visibility