werkbank
    Preparing search index...

    Function useDrag

    • Hook to handle drag interactions using RxJS.

      Type Parameters

      • E extends HTMLElement

        The HTML element type.

      Returns {
          drag: () => UnaryFunction<
              Observable<PointerEvent<E>>,
              Observable<DragEvent<E>>,
          >;
          drag$: Observable<DragEvent<E>>;
          dragStart$: Observable<PointerEvent<E>>;
          onPointerDown: (event: PointerEvent) => void;
      }

      An object containing the event handler and observables.

      This hook provides a pointerDown handler and an observable drag$ that emits drag events. It handles mouse and touch events via pointer events. Dragging is stopped on pointerUp or Escape key.

      const { onPointerDown, drag$ } = useDrag();

      useEffect(() => {
        const sub = drag$.subscribe(({ movementX, movementY }) => {
          console.log("Dragged:", movementX, movementY);
        });
        return () => sub.unsubscribe();
      }, [drag$]);

      return <div onPointerDown={onPointerDown}>Drag me</div>;

    Settings

    Member Visibility