> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useDraggable

> A hook for making the chat window draggable within the viewport.

A hook for making the chat window draggable within the viewport.

## Usage

```tsx theme={null}
import { ChatWindow, Header, useDraggable } from "@servicetitan/anvil2-ext-atlas";

function DraggableChatWindow() {
  const {
    position,
    isDragging,
    handleMouseDown,
    resetPosition,
  } = useDraggable({
    initialX: window.innerWidth - 390,
    initialY: 64,
    width: 390,
  });

  return (
    <ChatWindow open position={position} isDragging={isDragging}>
      <Header
        title="Atlas"
        isDraggable
        isDragging={isDragging}
        onMouseDown={handleMouseDown}
      />
      {/* Content */}
    </ChatWindow>
  );
}
```

## Options

| Option               | Type   | Default                  | Description                                        |
| -------------------- | ------ | ------------------------ | -------------------------------------------------- |
| initialX             | number | window\.innerWidth - 390 | Initial horizontal position                        |
| initialY             | number | 64                       | Initial vertical position                          |
| minVisibleHorizontal | number | 390                      | Minimum pixels visible horizontally when near edge |
| minVisibleVertical   | number | 56                       | Minimum pixels visible vertically when near edge   |
| width                | number | 390                      | Width of the draggable element                     |

## Returns

| Property        | Type                       | Description                                    |
| --------------- | -------------------------- | ---------------------------------------------- |
| position        | `{ x: number; y: number }` | Current position coordinates                   |
| isDragging      | `boolean`                  | Whether the element is currently being dragged |
| handleMouseDown | `(e: MouseEvent) => void`  | Handler to attach to the drag trigger element  |
| resetPosition   | `() => void`               | Resets position to calculated initial position |

## Behavior

* **Viewport Constraints**: Position is constrained to keep the minimum visible pixels within the viewport
* **Resize Handling**: Automatically adjusts position when window is resized
* **Text Selection**: Prevents text selection while dragging
* **Mouse Events**: Attaches global mouse events during drag for smooth tracking

## Example: Reset on Fullscreen Exit

```tsx theme={null}
function ChatWithReset() {
  const [fullscreen, setFullscreen] = useState(false);
  const { position, isDragging, handleMouseDown, resetPosition } = useDraggable();

  const handleFullscreenToggle = () => {
    if (fullscreen) {
      resetPosition(); // Reset to default position when exiting fullscreen
    }
    setFullscreen(!fullscreen);
  };

  return (
    <ChatWindow
      open
      fullscreen={fullscreen}
      position={fullscreen ? undefined : position}
      isDragging={isDragging}
    >
      <Header
        isDraggable={!fullscreen}
        isDragging={isDragging}
        onMouseDown={handleMouseDown}
        onFullscreen={handleFullscreenToggle}
        isExpanded={fullscreen}
      />
    </ChatWindow>
  );
}
```