Source: https://app-studio-6167b.web.app/docs/DragAndDrop

@app-studio/components

# Drag and Drop

A drag-and-drop component for reordering items with touch and mouse support.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop.tsx)

## Import

```ts
import { DragAndDrop } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Horizontal, Text, View } from 'app-studio';
import { DragAndDrop } from '@app-studio/components';

const tasks = [
  { id: 1, title: 'Design review', color: 'color-blue-500' },
  { id: 2, title: 'Write tests', color: 'color-green-500' },
  { id: 3, title: 'Ship release', color: 'color-purple-500' },
];

export const CardsDragAndDrop = () => (
  <DragAndDrop
    items={tasks}
    onChange={(next) => console.log('order', next)}
    itemProps={{ marginBottom: 8 }}
    renderItem={(item: (typeof tasks)[number]) => (
      <Horizontal
        alignItems="center"
        gap={10}
        padding={12}
        borderRadius={10}
        backgroundColor="color-white"
        borderWidth={1}
        borderStyle="solid"
        borderColor="color-gray-200"
      >
        <View
          widthHeight={10}
          borderRadius={999}
          backgroundColor={item.color}
        />
        <Text color="color-gray-800" fontWeight="600">
          {item.title}
        </Text>
      </Horizontal>
    )}
  />
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**DragAndDrop**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` Required | `any[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L4) |
| `onChange` | `((items: any[]) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L6) |
| `renderItem` | `((item: any, index: number) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L8) |
| `containerProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L10) |
| `itemProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L12) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.