### Setup React and Draggable for Browser Tests

Source: https://github.com/react-grid-layout/react-draggable/blob/master/test/browser/test.html

This script dynamically loads the react-draggable.min.js library and makes React, ReactDOM, and Draggable available globally. It's intended for use in browser test environments.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';

// Make React available globally for the Draggable bundle
window.React = React;
window.ReactDOM = { ...ReactDOM, ...ReactDOMClient };

// Dynamically load the built library (it expects React/ReactDOM as globals)
const script = document.createElement('script');
script.src = '../../build/web/react-draggable.min.js';
script.onload = () => {
  // Make things available globally for tests
  window.Draggable = ReactDraggable.default;
  window.DraggableCore = ReactDraggable.DraggableCore;
};
document.body.appendChild(script);
```

--------------------------------

### Install React-Draggable using npm or yarn

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

Use npm or yarn to add react-draggable to your project dependencies.

```bash
npm install react-draggable
# or
yarn add react-draggable
```

--------------------------------

### <DraggableCore>

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

DraggableCore provides drag callbacks without managing state or styles, offering more control to the user. It does not handle positioning automatically.

```APIDOC
## <DraggableCore>

### Description
For users that require full control, `<DraggableCore>` provides drag callbacks without managing state or styles. It does not set any transforms; you must handle positioning yourself.

See [React-Resizable](https://github.com/react-grid-layout/react-resizable) and [React-Grid-Layout](https://github.com/react-grid-layout/react-grid-layout) for usage examples.

### Props

`<DraggableCore>` accepts a subset of `<Draggable>` props:

- `allowAnyClick`
- `allowMobileScroll`
- `cancel`
- `disabled`
- `enableUserSelectHack`
- `grid`
- `handle`
- `nodeRef`
- `offsetParent`
- `onDrag`
- `onMouseDown`
- `onStart`
- `onStop`
- `scale`
```

--------------------------------

### Handling Content Security Policy with Nonce

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

Provide a `nonce` prop to `Draggable` to apply it to the injected style element, satisfying strict Content Security Policies that omit `'unsafe-inline'` from `style-src`.

```jsx
<Draggable nonce={cspNonce}>
  <div>Drag me</div>
</Draggable>
```

--------------------------------

### Import Draggable and DraggableCore components

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

Import the necessary components from the 'react-draggable' library for use in your React application. Supports both ES Modules and CommonJS.

```javascript
// ES Modules
import Draggable from 'react-draggable';
import { DraggableCore } from 'react-draggable';

// CommonJS
const Draggable = require('react-draggable');
const { DraggableCore } = require('react-draggable');
```

--------------------------------

### Using nodeRef Pattern in React Draggable

Source: https://github.com/react-grid-layout/react-draggable/blob/master/CLAUDE.md

Demonstrates the recommended way to use the `nodeRef` prop with Draggable components to avoid ReactDOM.findDOMNode deprecation warnings in React Strict Mode.

```jsx
const nodeRef = React.useRef(null);
<Draggable nodeRef={nodeRef}>
  <div ref={nodeRef}>Content</div>
</Draggable>
```

--------------------------------

### Basic Draggable Component Usage

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

This snippet shows the most basic usage of the Draggable component. It allows the contained div to be moved around the screen.

```jsx
<Draggable>
  <div>I can now be moved around!</div>
</Draggable>
```

--------------------------------

### Using nodeRef with Custom Components

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

For custom components, forward the `ref` and `props` to the underlying DOM element to correctly use `nodeRef` with `Draggable`.

```jsx
const MyComponent = forwardRef((props, ref) => (
  <div {...props} ref={ref}>Draggable content</div>
));

function App() {
  const nodeRef = useRef(null);

  return (
    <Draggable nodeRef={nodeRef}>
      <MyComponent ref={nodeRef} />
    </Draggable>
  );
}
```

--------------------------------

### Basic Draggable Component Usage

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

Import and use the Draggable component to make a div element draggable. Requires a ref for the DOM element, especially in React Strict Mode.

```jsx
import React, { useRef } from 'react';
import Draggable from 'react-draggable';

function App() {
  const nodeRef = useRef(null);

  return (
    <Draggable nodeRef={nodeRef}>
      <div ref={nodeRef}>Drag me!</div>
    </Draggable>
  );
}
```

--------------------------------

### <Draggable>

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

The Draggable component wraps an existing element, making it draggable. It manages state and styles for dragging, utilizing CSS Transforms for positioning.

```APIDOC
## <Draggable>

### Description
A `<Draggable>` element wraps an existing element and extends it with new event handlers and styles. It does not create a wrapper element in the DOM.

Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current positioning (relative, absolute, or static). Elements can also be moved between drags without incident.

If the item you are dragging already has a CSS Transform applied, it will be overwritten by `<Draggable>`. Use an intermediate wrapper (`<Draggable><span>...</span></Draggable>`) in this case.

### Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `allowAnyClick` | `boolean` | `false` | Allow dragging on non-left-button clicks |
| `allowMobileScroll` | `boolean` | `false` | Don't prevent `touchstart`, allowing scrolling inside containers |
| `axis` | `'both' | 'x' | 'y' | 'none'` | `'both'` | Axis to allow dragging on |
| `bounds` | `object | string` | - | Restrict movement. Use `'parent'`, a CSS selector, or `{left, top, right, bottom}` |
| `cancel` | `string` | - | CSS selector for elements that should not initiate drag |
| `defaultClassName` | `string` | `'react-draggable'` | Class name applied to the element |
| `defaultClassNameDragging` | `string` | `'react-draggable-dragging'` | Class name applied while dragging |
| `defaultClassNameDragged` | `string` | `'react-draggable-dragged'` | Class name applied after drag |
| `defaultPosition` | `{x: number, y: number}` | `{x: 0, y: 0}` | Starting position |
| `disabled` | `boolean` | `false` | Disable dragging |
| `enableUserSelectHack` | `boolean` | `true` | Add `user-select: none` while dragging |
| `grid` | `[number, number]` | - | Snap to grid `[x, y]` |
| `handle` | `string` | - | CSS selector for the drag handle |
| `nodeRef` | `React.RefObject` | - | Ref to the DOM element. Required for React Strict Mode |
| `nonce` | `string` | - | CSP nonce for the injected user-select `<style>` element (see [Content Security Policy](#content-security-policy)) |
| `offsetParent` | `HTMLElement` | - | Custom offsetParent for drag calculations |
| `onDrag` | `DraggableEventHandler` | - | Called while dragging |
| `onMouseDown` | `(e: MouseEvent) => void` | - | Called on mouse down |
| `onStart` | `DraggableEventHandler` | - | Called when dragging starts. Return `false` to cancel |
| `onStop` | `DraggableEventHandler` | - | Called when dragging stops |
| `position` | `{x: number, y: number}` | - | Controlled position |
| `positionOffset` | `{x: number | string, y: number | string}` | - | Position offset (supports percentages) |
| `scale` | `number` | `1` | Scale factor for dragging inside transformed parents |

**Note:** Setting `className`, `style`, or `transform` on `<Draggable>` will error. Set them on the child element.
```

--------------------------------

### Opting out of User Select Hack

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

Disable the automatic user selection hack by setting `enableUserSelectHack={false}` and manually add the necessary CSS rules to your stylesheet to prevent text highlighting during drag operations.

```css
.react-draggable-transparent-selection *::-moz-selection { all: inherit; }
.react-draggable-transparent-selection *::selection { all: inherit; }
```

--------------------------------

### Controlled Draggable with Position Prop

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

Programmatically reposition a `Draggable` component by passing the `position` prop and updating it via the `onDrag` event. This allows for controlled state management while using `Draggable`'s built-in state.

```jsx
function ControlledDraggable() {
  const nodeRef = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleDrag = (e, data) => {
    setPosition({ x: data.x, y: data.y });
  };

  const resetPosition = () => setPosition({ x: 0, y: 0 });

  return (
    <>
      <button onClick={resetPosition}>Reset</button>
      <Draggable nodeRef={nodeRef} position={position} onDrag={handleDrag}>
        <div ref={nodeRef}>Drag me or reset!</div>
      </Draggable>
    </>
  );
}
```

--------------------------------

### Draggable Component Type Definitions

Source: https://github.com/react-grid-layout/react-draggable/blob/master/README.md

TypeScript type definitions for Draggable event handlers and data payloads. These types help ensure correct usage of the event callbacks.

```typescript
type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;

type DraggableData = {
  node: HTMLElement,
  x: number, y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number,
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.