useDraggableCollection

Handles drag interactions for a collection component, with support for traditional mouse and touch based drag and drop, in addition to full parity for keyboard and screen reader users.

install	`yarn add react-aria`
version	3.35.1
usage	`import {useDraggableCollection, useDraggableItem} from 'react-aria'`

View repository

GitHub

View package

NPM

API#

useDraggableCollectionState(
  (props: DraggableCollectionStateOptions
)): DraggableCollectionState

useDraggableCollection(
  props: DraggableCollectionOptions,
  state: DraggableCollectionState,
  ref: RefObject<HTMLElement
    |  | null>
): void

useDraggableItem(
  (props: DraggableItemProps,
  , state: DraggableCollectionState
)): DraggableItemResult

Introduction#

Collection components built with hooks such as useListBox, useTable, and useGridList can support drag and drop interactions. Users can drag multiple selected items at once, or drag individual non-selected items.

React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press Enter on a draggable element to enter drag and drop mode. Then, they can press Tab to navigate between drop targets, and Enter to drop or Escape to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.

See the drag and drop introduction to learn more.

Implementation#

The useDraggableCollection hook implements drag interactions within any collection component, using state managed by useDraggableCollectionState. The useDraggableItem hook should be added to each individual item within the collection to make it draggable, combining props from the relevant hook (e.g. useOption). These hooks integrate with React Aria's selection system to enable dragging multiple selected items at once.

Example#

This example renders a ListBox using the useListBox hook, and adds support for dragging items. The highlighted code sections below show the main additions for drag and drop compared with a normal listbox.

import {Item, useDraggableCollectionState, useListState} from 'react-stately';

import {mergeProps, useDraggableCollection, useDraggableItem, useFocusRing, useListBox, useOption} from 'react-aria';

function ListBox(props) {
  // Setup listbox as normal. See the useListBox docs for more details.
  let state = useListState(props);
  let ref = React.useRef(null);
  let { listBoxProps } = useListBox(
    {
      ...props,
      // Prevent dragging from changing selection.
      shouldSelectOnPressUp: true    },
    state,
    ref
  );

  // Setup drag state for the collection.
  let dragState = useDraggableCollectionState({
    // Pass through events from props.
    ...props,

    // Collection and selection manager come from list state.
    collection: state.collection,
    selectionManager: state.selectionManager,

    // Provide data for each dragged item. This function could
    // also be provided by the user of the component.
    getItems: props.getItems || ((keys) => {
      return [...keys].map((key) => {
        let item = state.collection.getItem(key);

        return {
          'text/plain': item.textValue
        };
      });
    })
  });

  useDraggableCollection(props, dragState, ref);
  return (
    <ul {...listBoxProps} ref={ref}>
      {[...state.collection].map((item) => (
        <Option
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
        />
      ))}
    </ul>
  );
}

function Option({ item, state, dragState }) {
  // Setup listbox option as normal. See useListBox docs for details.
  let ref = React.useRef(null);
  let { optionProps } = useOption({ key: item.key }, state, ref);
  let { isFocusVisible, focusProps } = useFocusRing();

  // Register the item as a drag source.
  let { dragProps } = useDraggableItem({
    key: item.key
  }, dragState);
  // Merge option props and dnd props, and render the item.
  return (
    <li
      {...mergeProps(optionProps, dragProps, focusProps)}      ref={ref}
      className={`option ${isFocusVisible ? 'focus-visible' : ''}`}
    >
      {item.rendered}
    </li>
  );
}

<ListBox aria-label="Categories" selectionMode="multiple">
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

import {
  Item,
  useDraggableCollectionState,
  useListState
} from 'react-stately';

import {
  mergeProps,
  useDraggableCollection,
  useDraggableItem,
  useFocusRing,
  useListBox,
  useOption
} from 'react-aria';

function ListBox(props) {
  // Setup listbox as normal. See the useListBox docs for more details.
  let state = useListState(props);
  let ref = React.useRef(null);
  let { listBoxProps } = useListBox(
    {
      ...props,
      // Prevent dragging from changing selection.
      shouldSelectOnPressUp: true    },
    state,
    ref
  );

  // Setup drag state for the collection.
  let dragState = useDraggableCollectionState({
    // Pass through events from props.
    ...props,

    // Collection and selection manager come from list state.
    collection: state.collection,
    selectionManager: state.selectionManager,

    // Provide data for each dragged item. This function could
    // also be provided by the user of the component.
    getItems: props.getItems || ((keys) => {
      return [...keys].map((key) => {
        let item = state.collection.getItem(key);

        return {
          'text/plain': item.textValue
        };
      });
    })
  });

  useDraggableCollection(props, dragState, ref);
  return (
    <ul {...listBoxProps} ref={ref}>
      {[...state.collection].map((item) => (
        <Option
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
        />
      ))}
    </ul>
  );
}

function Option({ item, state, dragState }) {
  // Setup listbox option as normal. See useListBox docs for details.
  let ref = React.useRef(null);
  let { optionProps } = useOption(
    { key: item.key },
    state,
    ref
  );
  let { isFocusVisible, focusProps } = useFocusRing();

  // Register the item as a drag source.
  let { dragProps } = useDraggableItem({
    key: item.key
  }, dragState);
  // Merge option props and dnd props, and render the item.
  return (
    <li
      {...mergeProps(optionProps, dragProps, focusProps)}      ref={ref}
      className={`option ${
        isFocusVisible ? 'focus-visible' : ''
      }`}
    >
      {item.rendered}
    </li>
  );
}

<ListBox aria-label="Categories" selectionMode="multiple">
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

import {
  Item,
  useDraggableCollectionState,
  useListState
} from 'react-stately';

import {
  mergeProps,
  useDraggableCollection,
  useDraggableItem,
  useFocusRing,
  useListBox,
  useOption
} from 'react-aria';

function ListBox(props) {
  // Setup listbox as normal. See the useListBox docs for more details.
  let state =
    useListState(props);
  let ref = React.useRef(
    null
  );
  let { listBoxProps } =
    useListBox(
      {
        ...props,
        // Prevent dragging from changing selection.
        shouldSelectOnPressUp:
          true      },
      state,
      ref
    );

  // Setup drag state for the collection.
  let dragState =
    useDraggableCollectionState(
      {
        // Pass through events from props.
        ...props,

        // Collection and selection manager come from list state.
        collection:
          state
            .collection,
        selectionManager:
          state
            .selectionManager,

        // Provide data for each dragged item. This function could
        // also be provided by the user of the component.
        getItems:
          props
            .getItems ||
          ((keys) => {
            return [
              ...keys
            ].map(
              (key) => {
                let item =
                  state
                    .collection
                    .getItem(
                      key
                    );

                return {
                  'text/plain':
                    item
                      .textValue
                };
              }
            );
          })
      }
    );

  useDraggableCollection(
    props,
    dragState,
    ref
  );
  return (
    <ul
      {...listBoxProps}
      ref={ref}
    >
      {[
        ...state
          .collection
      ].map((item) => (
        <Option
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
        />
      ))}
    </ul>
  );
}

function Option(
  {
    item,
    state,
    dragState
  }
) {
  // Setup listbox option as normal. See useListBox docs for details.
  let ref = React.useRef(
    null
  );
  let { optionProps } =
    useOption(
      { key: item.key },
      state,
      ref
    );
  let {
    isFocusVisible,
    focusProps
  } = useFocusRing();

  // Register the item as a drag source.
  let { dragProps } =
    useDraggableItem({
      key: item.key
    }, dragState);
  // Merge option props and dnd props, and render the item.
  return (
    <li
      {...mergeProps(
        optionProps,
        dragProps,
        focusProps
      )}      ref={ref}
      className={`option ${
        isFocusVisible
          ? 'focus-visible'
          : ''
      }`}
    >
      {item.rendered}
    </li>
  );
}

<ListBox
  aria-label="Categories"
  selectionMode="multiple"
>
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

Show CSS

[role=listbox] {
  padding: 0;
  margin: 5px 0;
  list-style: none;
  box-shadow: inset 0 0 0 1px gray;
  max-width: 250px;
  outline: none;
  min-height: 50px;
  overflow: auto;
}

.option {
  padding: 3px 6px;
  outline: none;
}

.option[aria-selected=true] {
  background: blueviolet;
  color: white;
}

.option.focus-visible {
  box-shadow: inset 0 0 0 2px orange;
}

.option.drop-target {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--blue);
}

[role=listbox] {
  padding: 0;
  margin: 5px 0;
  list-style: none;
  box-shadow: inset 0 0 0 1px gray;
  max-width: 250px;
  outline: none;
  min-height: 50px;
  overflow: auto;
}

.option {
  padding: 3px 6px;
  outline: none;
}

.option[aria-selected=true] {
  background: blueviolet;
  color: white;
}

.option.focus-visible {
  box-shadow: inset 0 0 0 2px orange;
}

.option.drop-target {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--blue);
}

[role=listbox] {
  padding: 0;
  margin: 5px 0;
  list-style: none;
  box-shadow: inset 0 0 0 1px gray;
  max-width: 250px;
  outline: none;
  min-height: 50px;
  overflow: auto;
}

.option {
  padding: 3px 6px;
  outline: none;
}

.option[aria-selected=true] {
  background: blueviolet;
  color: white;
}

.option.focus-visible {
  box-shadow: inset 0 0 0 2px orange;
}

.option.drop-target {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--blue);
}

DropTarget#

The DropTarget component used above is defined below. See useDrop for more details and documentation.

Show code

import type {TextDropItem} from 'react-aria';
import {useButton, useDrop} from 'react-aria';

function DropTarget() {
  let [dropped, setDropped] = React.useState(null);
  let ref = React.useRef(null);
  let { dropProps, isDropTarget } = useDrop({
    ref,
    async onDrop(e) {
      let items = await Promise.all(
        e.items
          .filter((item) =>
            item.kind === 'text' &&
            (item.types.has('text/plain') ||
              item.types.has('my-app-custom-type'))
          )
          .map(async (item: TextDropItem) => {
            if (item.types.has('my-app-custom-type')) {
              return JSON.parse(await item.getText('my-app-custom-type'));
            } else {
              return { name: await item.getText('text/plain'), style: 'span' };
            }
          })
      );
      setDropped(items);
    }
  });

  let { buttonProps } = useButton({ elementType: 'div' }, ref);

  let message = ['Drop here'];
  if (dropped) {
    message = dropped.map((item, i) => (
      <div key={i}>
        <item.style>{item.name}</item.style>
      </div>
    ));
  }

  return (
    <div
      {...mergeProps(dropProps, buttonProps)}
      ref={ref}
      className={`droppable ${isDropTarget ? 'target' : ''}`}
    >
      {message}
    </div>
  );
}

import type {TextDropItem} from 'react-aria';
import {useButton, useDrop} from 'react-aria';

function DropTarget() {
  let [dropped, setDropped] = React.useState(null);
  let ref = React.useRef(null);
  let { dropProps, isDropTarget } = useDrop({
    ref,
    async onDrop(e) {
      let items = await Promise.all(
        e.items
          .filter((item) =>
            item.kind === 'text' &&
            (item.types.has('text/plain') ||
              item.types.has('my-app-custom-type'))
          )
          .map(async (item: TextDropItem) => {
            if (item.types.has('my-app-custom-type')) {
              return JSON.parse(
                await item.getText('my-app-custom-type')
              );
            } else {
              return {
                name: await item.getText('text/plain'),
                style: 'span'
              };
            }
          })
      );
      setDropped(items);
    }
  });

  let { buttonProps } = useButton(
    { elementType: 'div' },
    ref
  );

  let message = ['Drop here'];
  if (dropped) {
    message = dropped.map((item, i) => (
      <div key={i}>
        <item.style>{item.name}</item.style>
      </div>
    ));
  }

  return (
    <div
      {...mergeProps(dropProps, buttonProps)}
      ref={ref}
      className={`droppable ${
        isDropTarget ? 'target' : ''
      }`}
    >
      {message}
    </div>
  );
}

import type {TextDropItem} from 'react-aria';
import {
  useButton,
  useDrop
} from 'react-aria';

function DropTarget() {
  let [
    dropped,
    setDropped
  ] = React.useState(
    null
  );
  let ref = React.useRef(
    null
  );
  let {
    dropProps,
    isDropTarget
  } = useDrop({
    ref,
    async onDrop(e) {
      let items =
        await Promise
          .all(
            e.items
              .filter(
                (item) =>
                  item
                      .kind ===
                    'text' &&
                  (item
                    .types
                    .has(
                      'text/plain'
                    ) ||
                    item
                      .types
                      .has(
                        'my-app-custom-type'
                      ))
              )
              .map(
                async (
                  item:
                    TextDropItem
                ) => {
                  if (
                    item
                      .types
                      .has(
                        'my-app-custom-type'
                      )
                  ) {
                    return JSON
                      .parse(
                        await item
                          .getText(
                            'my-app-custom-type'
                          )
                      );
                  } else {
                    return {
                      name:
                        await item
                          .getText(
                            'text/plain'
                          ),
                      style:
                        'span'
                    };
                  }
                }
              )
          );
      setDropped(items);
    }
  });

  let { buttonProps } =
    useButton({
      elementType: 'div'
    }, ref);

  let message = [
    'Drop here'
  ];
  if (dropped) {
    message = dropped
      .map((item, i) => (
        <div key={i}>
          <item.style>
            {item.name}
          </item.style>
        </div>
      ));
  }

  return (
    <div
      {...mergeProps(
        dropProps,
        buttonProps
      )}
      ref={ref}
      className={`droppable ${
        isDropTarget
          ? 'target'
          : ''
      }`}
    >
      {message}
    </div>
  );
}

Show CSS

.droppable {
  width: 100px;
  height: 50px;
  border-radius: 6px;
  display: inline-block;
  padding: 20px;
  border: 2px dotted gray;
  white-space: pre-wrap;
}

.droppable.target {
  border: 2px solid var(--blue);
}

.droppable {
  width: 100px;
  height: 50px;
  border-radius: 6px;
  display: inline-block;
  padding: 20px;
  border: 2px dotted gray;
  white-space: pre-wrap;
}

.droppable.target {
  border: 2px solid var(--blue);
}

.droppable {
  width: 100px;
  height: 50px;
  border-radius: 6px;
  display: inline-block;
  padding: 20px;
  border: 2px dotted gray;
  white-space: pre-wrap;
}

.droppable.target {
  border: 2px solid var(--blue);
}

Drag data#

Data for a draggable element can be provided in multiple formats at once. This allows drop targets to choose data in a format that they understand. For example, you could serialize a complex object as JSON in a custom format for use within your own application, and also provide plain text and/or rich HTML fallbacks that can be used when a user drops data in an external application (e.g. an email message).

This can be done by returning multiple keys for an item from the getItems function. Types can either be a standard mime type for interoperability with external applications, or a custom string for use within your own app.

This example provides representations of each item as plain text, HTML, and a custom app-specific data format. Dropping on the drop targets in this page will use the custom data format to render formatted items. If you drop in an external application supporting rich text, the HTML representation will be used. Dropping in a text editor will use the plain text format.

let items = new Map([
  ['ps', { name: 'Photoshop', style: 'strong' }],
  ['xd', { name: 'XD', style: 'strong' }],
  ['id', { name: 'InDesign', style: 'strong' }],
  ['dw', { name: 'Dreamweaver', style: 'em' }],
  ['co', { name: 'Connect', style: 'em' }]
]);

let getItems = (keys) => (
  [...keys].map((key) => {
    let item = items.get(key);
    return {
      'text/plain': item.name,
      'text/html': `<${item.style}>${item.name}</${item.style}>`,
      'my-app-custom-type': JSON.stringify(item)
    };
  })
);
<ListBox
  aria-label="Adobe Apps"
  items={items}
  getItems={getItems}
  selectionMode="multiple"
>
  {([id, item]) => (
    <Item key={id} textValue={item.name}>
      <item.style>{item.name}</item.style>
    </Item>
  )}
</ListBox>
<DropTarget />

let items = new Map([
  ['ps', { name: 'Photoshop', style: 'strong' }],
  ['xd', { name: 'XD', style: 'strong' }],
  ['id', { name: 'InDesign', style: 'strong' }],
  ['dw', { name: 'Dreamweaver', style: 'em' }],
  ['co', { name: 'Connect', style: 'em' }]
]);

let getItems = (keys) => (
  [...keys].map((key) => {
    let item = items.get(key);
    return {
      'text/plain': item.name,
      'text/html':
        `<${item.style}>${item.name}</${item.style}>`,
      'my-app-custom-type': JSON.stringify(item)
    };
  })
);
<ListBox
  aria-label="Adobe Apps"
  items={items}
  getItems={getItems}
  selectionMode="multiple"
>
  {([id, item]) => (
    <Item key={id} textValue={item.name}>
      <item.style>{item.name}</item.style>
    </Item>
  )}
</ListBox>
<DropTarget />

let items = new Map([
  ['ps', {
    name: 'Photoshop',
    style: 'strong'
  }],
  ['xd', {
    name: 'XD',
    style: 'strong'
  }],
  ['id', {
    name: 'InDesign',
    style: 'strong'
  }],
  ['dw', {
    name: 'Dreamweaver',
    style: 'em'
  }],
  ['co', {
    name: 'Connect',
    style: 'em'
  }]
]);

let getItems = (
  keys
) => (
  [...keys].map(
    (key) => {
      let item = items
        .get(key);
      return {
        'text/plain':
          item.name,
        'text/html':
          `<${item.style}>${item.name}</${item.style}>`,
        'my-app-custom-type':
          JSON.stringify(
            item
          )
      };
    }
  )
);
<ListBox
  aria-label="Adobe Apps"
  items={items}
  getItems={getItems}
  selectionMode="multiple"
>
  {([id, item]) => (
    <Item
      key={id}
      textValue={item
        .name}
    >
      <item.style>
        {item.name}
      </item.style>
    </Item>
  )}
</ListBox>
<DropTarget />

Drag previews#

By default, the drag preview shown under the user's pointer or finger is a copy of the original element that started the drag. A custom preview can be rendered using the <DragPreview> component. This accepts a function as a child which receives the dragged data that was returned by getItems, and returns a rendered preview for those items. The DragPreview is linked with useDraggableCollectionState via a ref, passed to the preview property. The DragPreview should be placed in the component hierarchy appropriately, so that it receives any React context or inherited styles that it needs to render correctly.

This example renders a custom drag preview which shows the number of items being dragged, or the contents if there is only one.

import {DragPreview} from 'react-aria';

function ListBox(props) {
  // ...

  let preview = React.useRef(null);  let dragState = useDraggableCollectionState({
    collection: state.collection,
    selectionManager: state.selectionManager,
    preview,    getItems(keys) {
      return [...keys].map((key) => {
        let item = state.collection.getItem(key);
        return {
          'text/plain': item.textValue
        };
      });
    }
  });

  useDraggableCollection(props, dragState, ref);

  return (
    <ul {...listBoxProps} ref={ref}>
      {[...state.collection].map((item) => (
        <Option
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
        />
      ))}
      <DragPreview ref={preview}>
        {(items) => (
          <div style={{ background: 'green', color: 'white' }}>
            {items.length > 1
              ? `${items.length} items`
              : items[0]['text/plain']}
          </div>
        )}
      </DragPreview>    </ul>
  );
}

<ListBox aria-label="Categories" selectionMode="multiple">
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

import {DragPreview} from 'react-aria';

function ListBox(props) {
  // ...

  let preview = React.useRef(null);  let dragState = useDraggableCollectionState({
    collection: state.collection,
    selectionManager: state.selectionManager,
    preview,    getItems(keys) {
      return [...keys].map((key) => {
        let item = state.collection.getItem(key);
        return {
          'text/plain': item.textValue
        };
      });
    }
  });

  useDraggableCollection(props, dragState, ref);

  return (
    <ul {...listBoxProps} ref={ref}>
      {[...state.collection].map((item) => (
        <Option
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
        />
      ))}
      <DragPreview ref={preview}>
        {(items) => (
          <div
            style={{ background: 'green', color: 'white' }}
          >
            {items.length > 1
              ? `${items.length} items`
              : items[0]['text/plain']}
          </div>
        )}
      </DragPreview>    </ul>
  );
}

<ListBox aria-label="Categories" selectionMode="multiple">
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

import {DragPreview} from 'react-aria';

function ListBox(props) {
  // ...

  let preview = React
    .useRef(null);  let dragState =
    useDraggableCollectionState(
      {
        collection:
          state
            .collection,
        selectionManager:
          state
            .selectionManager,
        preview,        getItems(keys) {
          return [
            ...keys
          ].map(
            (key) => {
              let item =
                state
                  .collection
                  .getItem(
                    key
                  );
              return {
                'text/plain':
                  item
                    .textValue
              };
            }
          );
        }
      }
    );

  useDraggableCollection(
    props,
    dragState,
    ref
  );

  return (
    <ul
      {...listBoxProps}
      ref={ref}
    >
      {[
        ...state
          .collection
      ].map((item) => (
        <Option
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
        />
      ))}
      <DragPreview
        ref={preview}
      >
        {(items) => (
          <div
            style={{
              background:
                'green',
              color:
                'white'
            }}
          >
            {items
                .length >
                1
              ? `${items.length} items`
              : items[0][
                'text/plain'
              ]}
          </div>
        )}
      </DragPreview>    </ul>
  );
}

<ListBox
  aria-label="Categories"
  selectionMode="multiple"
>
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

Drop operations#

A DropOperation is an indication of what will happen when dragged data is dropped on a particular drop target. These are:

move – indicates that the dragged data will be moved from its source location to the target location.
copy – indicates that the dragged data will be copied to the target destination.
link – indicates that there will be a relationship established between the source and target locations.
cancel – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.

Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as Option or Alt to switch from move to copy.

The onDragEnd event allows the drag source to respond when a drag that it initiated ends, either because it was dropped or because it was canceled by the user. The dropOperation property of the event object indicates the operation that was performed. For example, when data is moved, the UI could be updated to reflect this change by removing the original dragged items.

This example removes the dragged items from the UI when a move operation is completed. It uses the useListData hook to help manage and update the list of items. Try holding the Option or Alt keys to change the operation to copy, and see how the behavior changes.

import {useListData} from 'react-stately';

function Example() {
  let list = useListData({
    initialItems: [
      { id: 'a', textValue: 'Photoshop' },
      { id: 'b', textValue: 'XD' },
      { id: 'c', textValue: 'Dreamweaver' },
      { id: 'd', textValue: 'InDesign' },
      { id: 'e', textValue: 'Connect' }
    ]
  });

  let onDragEnd = (e) => {
    if (e.dropOperation === 'move') {
      list.remove(...e.keys);
    }
  };
  return (
    <>
      <ListBox
        aria-label="Adobe apps"
        items={list.items}
        onDragEnd={onDragEnd}
        selectionMode="multiple"
      >
        {(item) => <Item>{item.textValue}</Item>}
      </ListBox>
      <DropTarget />
    </>
  );
}

import {useListData} from 'react-stately';

function Example() {
  let list = useListData({
    initialItems: [
      { id: 'a', textValue: 'Photoshop' },
      { id: 'b', textValue: 'XD' },
      { id: 'c', textValue: 'Dreamweaver' },
      { id: 'd', textValue: 'InDesign' },
      { id: 'e', textValue: 'Connect' }
    ]
  });

  let onDragEnd = (e) => {
    if (e.dropOperation === 'move') {
      list.remove(...e.keys);
    }
  };
  return (
    <>
      <ListBox
        aria-label="Adobe apps"
        items={list.items}
        onDragEnd={onDragEnd}
        selectionMode="multiple"
      >
        {(item) => <Item>{item.textValue}</Item>}
      </ListBox>
      <DropTarget />
    </>
  );
}

import {useListData} from 'react-stately';

function Example() {
  let list = useListData(
    {
      initialItems: [
        {
          id: 'a',
          textValue:
            'Photoshop'
        },
        {
          id: 'b',
          textValue: 'XD'
        },
        {
          id: 'c',
          textValue:
            'Dreamweaver'
        },
        {
          id: 'd',
          textValue:
            'InDesign'
        },
        {
          id: 'e',
          textValue:
            'Connect'
        }
      ]
    }
  );

  let onDragEnd =
    (e) => {
      if (
        e.dropOperation ===
          'move'
      ) {
        list.remove(
          ...e.keys
        );
      }
    };
  return (
    <>
      <ListBox
        aria-label="Adobe apps"
        items={list
          .items}
        onDragEnd={onDragEnd}
        selectionMode="multiple"
      >
        {(item) => (
          <Item>
            {item
              .textValue}
          </Item>
        )}
      </ListBox>
      <DropTarget />
    </>
  );
}

The drag source can also control which drop operations are allowed for the data. For example, if moving data is not allowed, and only copying is supported, the getAllowedDropOperations function could be implemented to indicate this. When you drag the element below, the cursor now shows the copy affordance by default, and pressing a modifier to switch drop operations results in the drop being canceled.

<ListBox
  aria-label="Categories"
  getAllowedDropOperations={() => ['copy']}  selectionMode="multiple"
 >
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

<ListBox
  aria-label="Categories"
  getAllowedDropOperations={() => ['copy']}  selectionMode="multiple"
 >
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

<ListBox
  aria-label="Categories"
  getAllowedDropOperations={() => [
    'copy'
  ]}  selectionMode="multiple"
>
  <Item>Animals</Item>
  <Item>People</Item>
  <Item>Plants</Item>
</ListBox>
<DropTarget />

Reordering#

Drag and drop can be combined in the same collection component to allow reordering items. See useDroppableCollection for more details.

import {ListDropTargetDelegate, ListKeyboardDelegate, useDropIndicator, useDroppableCollection} from 'react-aria';

import {useDroppableCollectionState} from 'react-stately';

function ReorderableListBox(props) {
  // ...

  // Setup react-stately and react-aria hooks for dropping.
  let dropState = useDroppableCollectionState({
    ...props,
    collection: state.collection,
    selectionManager: state.selectionManager
  });

  let { collectionProps } = useDroppableCollection(
    {
      ...props,
      // Provide drop targets for keyboard and pointer-based drag and drop.
      keyboardDelegate: new ListKeyboardDelegate(
        state.collection,
        state.disabledKeys,
        ref
      ),
      dropTargetDelegate: new ListDropTargetDelegate(state.collection, ref)
    },
    dropState,
    ref
  );
  return (
    <ul
      {...mergeProps(listBoxProps, collectionProps)}      ref={ref}
    >
      {[...state.collection].map((item) => (
        <ReorderableOption
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
          dropState={dropState}        />
      ))}
    </ul>
  );
}

function ReorderableOption({ item, state, dragState, dropState }) {
  // ...

  return (
    <>
      <DropIndicator
        target={{ type: 'item', key: item.key, dropPosition: 'before' }}
        dropState={dropState}
      />      <li
        {...mergeProps(optionProps, dragProps, focusProps)}
        ref={ref}
        className={`option ${isFocusVisible ? 'focus-visible' : ''}`}
      >
        {item.rendered}
      </li>
      {state.collection.getKeyAfter(item.key) == null &&
        (
          <DropIndicator
            target={{ type: 'item', key: item.key, dropPosition: 'after' }}
            dropState={dropState}
          />
        )}    </>
  );
}

function DropIndicator(props) {
  let ref = React.useRef(null);
  let { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(
    props,
    props.dropState,
    ref
  );
  if (isHidden) {
    return null;
  }

  return (
    <li
      {...dropIndicatorProps}
      role="option"
      ref={ref}
      className={`drop-indicator ${isDropTarget ? 'drop-target' : ''}`}
    />
  );
}

import {
  ListDropTargetDelegate,
  ListKeyboardDelegate,
  useDropIndicator,
  useDroppableCollection
} from 'react-aria';

import {useDroppableCollectionState} from 'react-stately';

function ReorderableListBox(props) {
  // ...

  // Setup react-stately and react-aria hooks for dropping.
  let dropState = useDroppableCollectionState({
    ...props,
    collection: state.collection,
    selectionManager: state.selectionManager
  });

  let { collectionProps } = useDroppableCollection(
    {
      ...props,
      // Provide drop targets for keyboard and pointer-based drag and drop.
      keyboardDelegate: new ListKeyboardDelegate(
        state.collection,
        state.disabledKeys,
        ref
      ),
      dropTargetDelegate: new ListDropTargetDelegate(
        state.collection,
        ref
      )
    },
    dropState,
    ref
  );
  return (
    <ul
      {...mergeProps(listBoxProps, collectionProps)}      ref={ref}
    >
      {[...state.collection].map((item) => (
        <ReorderableOption
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
          dropState={dropState}        />
      ))}
    </ul>
  );
}

function ReorderableOption(
  { item, state, dragState, dropState }
) {
  // ...

  return (
    <>
      <DropIndicator
        target={{
          type: 'item',
          key: item.key,
          dropPosition: 'before'
        }}
        dropState={dropState}
      />      <li
        {...mergeProps(optionProps, dragProps, focusProps)}
        ref={ref}
        className={`option ${
          isFocusVisible ? 'focus-visible' : ''
        }`}
      >
        {item.rendered}
      </li>
      {state.collection.getKeyAfter(item.key) == null &&
        (
          <DropIndicator
            target={{
              type: 'item',
              key: item.key,
              dropPosition: 'after'
            }}
            dropState={dropState}
          />
        )}    </>
  );
}

function DropIndicator(props) {
  let ref = React.useRef(null);
  let { dropIndicatorProps, isHidden, isDropTarget } =
    useDropIndicator(props, props.dropState, ref);
  if (isHidden) {
    return null;
  }

  return (
    <li
      {...dropIndicatorProps}
      role="option"
      ref={ref}
      className={`drop-indicator ${
        isDropTarget ? 'drop-target' : ''
      }`}
    />
  );
}

import {
  ListDropTargetDelegate,
  ListKeyboardDelegate,
  useDropIndicator,
  useDroppableCollection
} from 'react-aria';

import {useDroppableCollectionState} from 'react-stately';

function ReorderableListBox(
  props
) {
  // ...

  // Setup react-stately and react-aria hooks for dropping.
  let dropState =
    useDroppableCollectionState(
      {
        ...props,
        collection:
          state
            .collection,
        selectionManager:
          state
            .selectionManager
      }
    );

  let {
    collectionProps
  } =
    useDroppableCollection(
      {
        ...props,
        // Provide drop targets for keyboard and pointer-based drag and drop.
        keyboardDelegate:
          new ListKeyboardDelegate(
            state
              .collection,
            state
              .disabledKeys,
            ref
          ),
        dropTargetDelegate:
          new ListDropTargetDelegate(
            state
              .collection,
            ref
          )
      },
      dropState,
      ref
    );
  return (
    <ul
      {...mergeProps(
        listBoxProps,
        collectionProps
      )}      ref={ref}
    >
      {[
        ...state
          .collection
      ].map((item) => (
        <ReorderableOption
          key={item.key}
          item={item}
          state={state}
          dragState={dragState}
          dropState={dropState}        />
      ))}
    </ul>
  );
}

function ReorderableOption(
  {
    item,
    state,
    dragState,
    dropState
  }
) {
  // ...

  return (
    <>
      <DropIndicator
        target={{
          type: 'item',
          key: item.key,
          dropPosition:
            'before'
        }}
        dropState={dropState}
      />      <li
        {...mergeProps(
          optionProps,
          dragProps,
          focusProps
        )}
        ref={ref}
        className={`option ${
          isFocusVisible
            ? 'focus-visible'
            : ''
        }`}
      >
        {item.rendered}
      </li>
      {state.collection
            .getKeyAfter(
              item.key
            ) == null &&
        (
          <DropIndicator
            target={{
              type:
                'item',
              key:
                item.key,
              dropPosition:
                'after'
            }}
            dropState={dropState}
          />
        )}    </>
  );
}

function DropIndicator(
  props
) {
  let ref = React.useRef(
    null
  );
  let {
    dropIndicatorProps,
    isHidden,
    isDropTarget
  } = useDropIndicator(
    props,
    props.dropState,
    ref
  );
  if (isHidden) {
    return null;
  }

  return (
    <li
      {...dropIndicatorProps}
      role="option"
      ref={ref}
      className={`drop-indicator ${
        isDropTarget
          ? 'drop-target'
          : ''
      }`}
    />
  );
}

Now, we can render an example ListBox, which allows the user to reorder items. The onReorder event is triggered when the user drops dragged items which originated within the same collection. As above, useListData is used to manage the list items in this example, but it is not a requirement.

import {useListData} from 'react-stately';

function Example() {
  let list = useListData({
    initialItems: [
      { id: 1, name: 'Cat' },
      { id: 2, name: 'Dog' },
      { id: 3, name: 'Kangaroo' },
      { id: 4, name: 'Panda' },
      { id: 5, name: 'Snake' }
    ]
  });

  let onReorder = (e) => {
    if (e.target.dropPosition === 'before') {
      list.moveBefore(e.target.key, e.keys);
    } else if (e.target.dropPosition === 'after') {
      list.moveAfter(e.target.key, e.keys);
    }
  };

  return (
    <ReorderableListBox
      aria-label="Favorite animals"
      selectionMode="multiple"
      selectionBehavior="replace"
      items={list.items}
      onReorder={onReorder}    >
      {(item) => <Item>{item.name}</Item>}
    </ReorderableListBox>
  );
}

import {useListData} from 'react-stately';

function Example() {
  let list = useListData({
    initialItems: [
      { id: 1, name: 'Cat' },
      { id: 2, name: 'Dog' },
      { id: 3, name: 'Kangaroo' },
      { id: 4, name: 'Panda' },
      { id: 5, name: 'Snake' }
    ]
  });

  let onReorder = (e) => {
    if (e.target.dropPosition === 'before') {
      list.moveBefore(e.target.key, e.keys);
    } else if (e.target.dropPosition === 'after') {
      list.moveAfter(e.target.key, e.keys);
    }
  };

  return (
    <ReorderableListBox
      aria-label="Favorite animals"
      selectionMode="multiple"
      selectionBehavior="replace"
      items={list.items}
      onReorder={onReorder}    >
      {(item) => <Item>{item.name}</Item>}
    </ReorderableListBox>
  );
}

import {useListData} from 'react-stately';

function Example() {
  let list = useListData(
    {
      initialItems: [
        {
          id: 1,
          name: 'Cat'
        },
        {
          id: 2,
          name: 'Dog'
        },
        {
          id: 3,
          name:
            'Kangaroo'
        },
        {
          id: 4,
          name: 'Panda'
        },
        {
          id: 5,
          name: 'Snake'
        }
      ]
    }
  );

  let onReorder =
    (e) => {
      if (
        e.target
          .dropPosition ===
          'before'
      ) {
        list.moveBefore(
          e.target.key,
          e.keys
        );
      } else if (
        e.target
          .dropPosition ===
          'after'
      ) {
        list.moveAfter(
          e.target.key,
          e.keys
        );
      }
    };

  return (
    <ReorderableListBox
      aria-label="Favorite animals"
      selectionMode="multiple"
      selectionBehavior="replace"
      items={list.items}
      onReorder={onReorder}    >
      {(item) => (
        <Item>
          {item.name}
        </Item>
      )}
    </ReorderableListBox>
  );
}

Show CSS

.drop-indicator {
  width: 100%;
  margin-left: 0;
  height: 2px;
  margin-bottom: -2px;
  outline: none;
  background: transparent;
}

.drop-indicator:last-child {
  margin-bottom: 0;
  margin-top: -2px;
}

.drop-indicator.drop-target {
  background: var(--blue);
}

.drop-indicator {
  width: 100%;
  margin-left: 0;
  height: 2px;
  margin-bottom: -2px;
  outline: none;
  background: transparent;
}

.drop-indicator:last-child {
  margin-bottom: 0;
  margin-top: -2px;
}

.drop-indicator.drop-target {
  background: var(--blue);
}

.drop-indicator {
  width: 100%;
  margin-left: 0;
  height: 2px;
  margin-bottom: -2px;
  outline: none;
  background: transparent;
}

.drop-indicator:last-child {
  margin-bottom: 0;
  margin-top: -2px;
}

.drop-indicator.drop-target {
  background: var(--blue);
}

Props#

The full list of props supported by draggable collections is available below.

Name	Type	Description
`getItems`	`( (keys: Set<Key> )) => DragItem[]`	A function that returns the items being dragged.
`onDragStart`	`( (e: DraggableCollectionStartEvent )) => void`	Handler that is called when a drag operation is started.
`onDragMove`	`( (e: DraggableCollectionMoveEvent )) => void`	Handler that is called when the drag is moved.
`onDragEnd`	`( (e: DraggableCollectionEndEvent )) => void`	Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation.
`preview`	`RefObject<DragPreviewRenderer \| null>`	The ref of the element that will be rendered as the drag preview while dragging.
`getAllowedDropOperations`	`() => DropOperation[]`	Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.

Name	Type	Description
`collection`	`Collection<Node<unknown>>`	A collection of items.
`selectionManager`	`MultipleSelectionManager`	An interface for reading and updating multiple selection state.
`getItems`	`( (keys: Set<Key> )) => DragItem[]`	A function that returns the items being dragged.
`isDisabled`	`boolean`	Whether the drag events should be disabled.
`onDragStart`	`( (e: DraggableCollectionStartEvent )) => void`	Handler that is called when a drag operation is started.
`onDragMove`	`( (e: DraggableCollectionMoveEvent )) => void`	Handler that is called when the drag is moved.
`onDragEnd`	`( (e: DraggableCollectionEndEvent )) => void`	Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation.
`preview`	`RefObject<DragPreviewRenderer \| null>`	The ref of the element that will be rendered as the drag preview while dragging.
`getAllowedDropOperations`	`() => DropOperation[]`	Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.

A generic interface to access a readonly sequential collection of unique keyed items.

Extends: Iterable

Properties

Name	Type	Description
`size`	`number`	The number of items in the collection.

Methods

Method	Description
`getKeys(): Iterable<Key>`	Iterate over all keys in the collection.
`getItem( (key: Key )): T \| null`	Get an item by its key.
`at( (idx: number )): T \| null`	Get an item by the index of its key.
`getKeyBefore( (key: Key )): Key \| null`	Get the key that comes before the given key in the collection.
`getKeyAfter( (key: Key )): Key \| null`	Get the key that comes after the given key in the collection.
`getFirstKey(): Key \| null`	Get the first key in the collection.
`getLastKey(): Key \| null`	Get the last key in the collection.
`getChildren( (key: Key )): Iterable<T>`	Iterate over the child items of the given key.
`getTextValue( (key: Key )): string`	Returns a string representation of the item's contents.

Name	Type	Description
`type`	`string`	The type of item this node represents.
`key`	`Key`	A unique key for the node.
`value`	`T \| null`	The object value the node was created from.
`level`	`number`	The level of depth this node is at in the hierarchy.
`hasChildNodes`	`boolean`	Whether this item has children, even if not loaded yet.
`rendered`	`ReactNode`	The rendered contents of this node (e.g. JSX).
`textValue`	`string`	A string value for this node, used for features like typeahead.
`index`	`number`	The index of this node within its parent.
`aria-label`	`string`	An accessibility label for this node.
`wrapper`	`( (element: ReactElement )) => ReactElement`	A function that should be called to wrap the rendered node.
`parentKey`	`Key \| null`	The key of the parent node.
`prevKey`	`Key \| null`	The key of the node before this node.
`nextKey`	`Key \| null`	The key of the node after this node.
`props`	`any`	Additional properties specific to a particular node type.
`render`	`( (node: Node<any> )) => ReactElement`	A function that renders this node to a React Element in the DOM.

Properties

Name	Type	Description
`selectionMode`	`SelectionMode`	The type of selection that is allowed in the collection.
`selectionBehavior`	`SelectionBehavior`	The selection behavior for the collection.
`selectedKeys`	`Set<Key>`	The currently selected keys in the collection.
`isEmpty`	`boolean`	Whether the selection is empty.
`isSelectAll`	`boolean`	Whether all items in the collection are selected.
`firstSelectedKey`	`Key \| null`	The first selected key in the collection.
`lastSelectedKey`	`Key \| null`	The last selected key in the collection.
`disabledKeys`	`Set<Key>`	The currently disabled keys in the collection.
`disabledBehavior`	`DisabledBehavior`	Whether `disabledKeys` applies to selection, actions, or both.
`isFocused`	`boolean`	Whether the collection is currently focused.
`focusedKey`	`Key \| null`	The current focused key in the collection.
`childFocusStrategy`	`FocusStrategy \| null`	Whether the first or last child of the focused key should receive focus.
`disallowEmptySelection`	`boolean`	Whether the collection allows empty selection.

Methods

Method	Description
`isSelected( (key: Key )): boolean`	Returns whether a key is selected.
`isSelectionEqual( (selection: Set<Key> )): boolean`	Returns whether the current selection is equal to the given selection.
`extendSelection( (toKey: Key )): void`	Extends the selection to the given key.
`toggleSelection( (key: Key )): void`	Toggles whether the given key is selected.
`replaceSelection( (key: Key )): void`	Replaces the selection with only the given key.
`setSelectedKeys( (keys: Iterable<Key> )): void`	Replaces the selection with the given keys.
`selectAll(): void`	Selects all items in the collection.
`clearSelection(): void`	Removes all keys from the selection.
`toggleSelectAll(): void`	Toggles between select all and an empty selection.
`select( (key: Key, , e?: PressEvent \| LongPressEvent \| PointerEvent )): void`	Toggles, replaces, or extends selection to the given key depending on the pointer event and collection's selection mode.
`canSelectItem( (key: Key )): boolean`	Returns whether the given key can be selected.
`isDisabled( (key: Key )): boolean`	Returns whether the given key is non-interactive, i.e. both selection and actions are disabled.
`setSelectionBehavior( (selectionBehavior: SelectionBehavior )): void`	Sets the selection behavior for the collection.
`isLink( (key: Key )): boolean`	Returns whether the given key is a hyperlink.
`getItemProps( (key: Key )): any`	Returns the props for the given item.
`setFocused( (isFocused: boolean )): void`	Sets whether the collection is focused.
`setFocusedKey( (key: Key \| \| null, , child?: FocusStrategy )): void`	Sets the focused key, and optionally, whether the first or last child of that key should receive focus.

'none'
  | 'single'
  | 'multiple'

'toggle' | 'replace'

string | number

'selection' | 'all'

Properties

Name	Type	Description
`type`	`'pressstart' \| 'pressend' \| 'pressup' \| 'press'`	The type of press event being fired.
`pointerType`	`PointerType`	The pointer type that triggered the press event.
`target`	`Element`	The target element of the press event.
`shiftKey`	`boolean`	Whether the shift keyboard modifier was held during the press event.
`ctrlKey`	`boolean`	Whether the ctrl keyboard modifier was held during the press event.
`metaKey`	`boolean`	Whether the meta keyboard modifier was held during the press event.
`altKey`	`boolean`	Whether the alt keyboard modifier was held during the press event.
`x`	`number`	X position relative to the target.
`y`	`number`	Y position relative to the target.

Methods

Method	Description
`continuePropagation(): void`	By default, press events stop propagation to parent elements. In cases where a handler decides not to handle a specific event, it can call `continuePropagation()` to allow a parent to handle it.

'mouse'
  | 'pen'
  | 'touch'
  | 'keyboard'
  | 'virtual'

Name	Type	Description
`type`	`'longpressstart' \| 'longpressend' \| 'longpress'`	The type of long press event being fired.
`pointerType`	`PointerType`	The pointer type that triggered the press event.
`target`	`Element`	The target element of the press event.
`shiftKey`	`boolean`	Whether the shift keyboard modifier was held during the press event.
`ctrlKey`	`boolean`	Whether the ctrl keyboard modifier was held during the press event.
`metaKey`	`boolean`	Whether the meta keyboard modifier was held during the press event.
`altKey`	`boolean`	Whether the alt keyboard modifier was held during the press event.
`x`	`number`	X position relative to the target.
`y`	`number`	Y position relative to the target.

'first' | 'last'

Name	Type	Description
`keys`	`Set<Key>`	The keys of the items that were dragged.
`type`	`'dragstart'`	The event type.
`x`	`number`	The x coordinate of the event, relative to the target element.
`y`	`number`	The y coordinate of the event, relative to the target element.

Name	Type	Description
`keys`	`Set<Key>`	The keys of the items that were dragged.
`type`	`'dragmove'`	The event type.
`x`	`number`	The x coordinate of the event, relative to the target element.
`y`	`number`	The y coordinate of the event, relative to the target element.

Name	Type	Description
`keys`	`Set<Key>`	The keys of the items that were dragged.
`isInternal`	`boolean`	Whether the drop ended within the same collection as it originated.
`type`	`'dragend'`	The event type.
`dropOperation`	`DropOperation`	The drop operation that occurred.
`x`	`number`	The x coordinate of the event, relative to the target element.
`y`	`number`	The y coordinate of the event, relative to the target element.

'copy'
  | 'link'
  | 'move'
  | 'cancel'

Name	Type	Description
`type`	`string`

(
  (items: DragItem[],
  , callback: (
    (node: HTMLElement
      |  | null
  )) => void
)) => void

Properties

Name	Type	Description
`collection`	`Collection<Node<unknown>>`	A collection of items.
`selectionManager`	`MultipleSelectionManager`	An interface for reading and updating multiple selection state.
`draggedKey`	`Key \| null`	The key of the item that initiated a drag.
`draggingKeys`	`Set<Key>`	The keys of the items that are currently being dragged.
`isDisabled`	`boolean`	Whether drag events are disabled.
`preview`	`RefObject<DragPreviewRenderer \| null>`	The ref of the element that will be rendered as the drag preview while dragging.
`getAllowedDropOperations`	`() => DropOperation[]`	Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.

Methods

Method	Description
`isDragging( (key: Key )): boolean`	Returns whether the given key is currently being dragged.
`getKeysForDrag( (key: Key )): Set<Key>`	Returns the keys of the items that will be dragged with the given key (e.g. selected items).
`getItems( (key: Key )): DragItem[]`	Returns the items to drag for the given key.
`startDrag( (key: Key, , event: DragStartEvent )): void`	Begins a drag for the given key. This triggers the onDragStart event.
`moveDrag( (event: DragMoveEvent )): void`	Triggers an onDragMove event.
`endDrag( (event: DraggableCollectionEndEvent )): void`	Ends the current drag, and emits an onDragEnd event.

Name	Type	Description
`current`	`T`

Name	Type	Description
`type`	`'dragstart'`	The event type.
`x`	`number`	The x coordinate of the event, relative to the target element.
`y`	`number`	The y coordinate of the event, relative to the target element.

Name	Type	Description
`type`	`'dragmove'`	The event type.
`x`	`number`	The x coordinate of the event, relative to the target element.
`y`	`number`	The y coordinate of the event, relative to the target element.

Name	Type	Description
`key`	`Key`	The key of the draggable item within the collection.
`hasDragButton`	`boolean`	Whether the item has an explicit focusable drag affordance to initiate accessible drag and drop mode. If true, the dragProps will omit these event handlers, and they will be applied to dragButtonProps instead.
`hasAction`	`boolean`	Whether the item has a primary action (e.g. Enter key or long press) that would conflict with initiating accessible drag and drop. If true, the Alt key must be held to start dragging with a keyboard, and long press is disabled until selection mode is entered. This should be passed from the associated collection item hook (e.g. useOption, useGridListItem, etc.).

Name	Type	Description
`dragProps`	`HTMLAttributes<HTMLElement>`	Props for the draggable item.
`dragButtonProps`	`AriaButtonProps`	Props for the explicit drag button affordance, if any.

Name	Type	Default	Description
`isDisabled`	`boolean`	—	Whether the button is disabled.
`children`	`ReactNode`	—	The content to display in the button.
`onPress`	`( (e: PressEvent )) => void`	—	Handler that is called when the press is released over the target.
`onPressStart`	`( (e: PressEvent )) => void`	—	Handler that is called when a press interaction starts.
`onPressEnd`	`( (e: PressEvent )) => void`	—	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	`( (isPressed: boolean )) => void`	—	Handler that is called when the press state changes.
`onPressUp`	`( (e: PressEvent )) => void`	—	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render.
`onFocus`	`( (e: FocusEvent<Target> )) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent<Target> )) => void`	—	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	—	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is released.
`href`	`string`	—	A URL to link to if elementType="a".
`target`	`string`	—	The target window for the link.
`rel`	`string`	—	The relationship between the linked resource and the current page. See MDN.
`elementType`	`ElementType \| JSXElementConstructor<any>`	`'button'`	The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.
`aria-expanded`	`boolean \| 'true' \| 'false'`	—	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-haspopup`	`boolean \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog' \| 'true' \| 'false'`	—	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-controls`	`string`	—	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-pressed`	`boolean \| 'true' \| 'false' \| 'mixed'`	—	Indicates the current "pressed" state of toggle buttons.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	The behavior of the button when used in an HTML form.
`preventFocusOnPress`	`boolean`	—	Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
`excludeFromTabOrder`	`boolean`	—	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
`id`	`string`	—	The element's unique identifier. See MDN.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.

BaseEvent<ReactKeyboardEvent<any>>

SyntheticEvent & {stopPropagation: () => void,
continuePropagation: () => void
}

Handles drag interactions for a collection component, with support for traditional mouse and touch based drag and drop, in addition to full parity for keyboard and screen reader users.

useDraggableCollection(
  props: DraggableCollectionOptions,
  state: DraggableCollectionState,
  ref: RefObject<HTMLElement
    |  | null>
): void

Manages state for a draggable collection.

useDraggableCollectionState(
  (props: DraggableCollectionStateOptions
)): DraggableCollectionState

Handles drag interactions for an item within a draggable collection.

useDraggableItem(
  (props: DraggableItemProps,
  , state: DraggableCollectionState
)): DraggableItemResult