Drop Target

A component that makes its element a drop zone.

Drop me

Drop here

'use client';
import * as React from 'react';
import { Draggable } from '@base-ui/react/draggable';
import { DropTarget } from '@base-ui/react/drop-target';
import styles from './hero.module.css';

const itemKind = Draggable.createKind('drop-target/hero-item');

export default function DropTargetHero() {
  const [dropped, setDropped] = React.useState(false);

  return (
    <div className={styles.Root}>
      <div className={styles.Source}>
        <Draggable.Root
          className={styles.Item}
          data-dropped={dropped || undefined}
          kind={itemKind}
          label="Item"
          role="button"
          tabIndex={0}
        >
          Drop me
        </Draggable.Root>
        {dropped && (
          <button type="button" className={styles.Reset} onClick={() => setDropped(false)}>
            Reset
          </button>
        )}
      </div>
      <DropTarget.Root
        className={styles.Target}
        label="Drop zone"
        accept={itemKind}
        onDrop={() => setDropped(true)}
      >
        {!dropped && <span className={styles.Hint}>Drop here</span>}
      </DropTarget.Root>
    </div>
  );
}

DropTarget marks where a drag can be released. It pairs with Draggable, which defines what can be picked up. See the drag and drop overview for examples and the collections guide for reorderable lists and boards.

Anatomy

Import the component and render it around the drop zone:

Anatomy

import { DropTarget } from '@base-ui/react/drop-target';
import { Draggable } from '@base-ui/react/draggable';

const itemKind = Draggable.createKind('item');

<DropTarget.Root accept={itemKind} label="Items" />

DropTarget.Root handles Base UI drags, not native HTML5 or operating-system drags. To accept native data such as desktop files, pass native handlers through render:

Accepting OS file drops

<DropTarget.Root
  accept={card}
  label="Cards and files"
  onDrop={handleEngineDrop}
  render={<div onDrop={handleFileDrop} onDragOver={allowFileDrop} />}
/>

Choose which items to accept

Pass the accepted kind to accept. The target ignores other kinds, but an ancestor target can still accept them. The kind also determines the type of source.payload in drop handlers.

Accepting only cards

const card = Draggable.createKind<CardPayload>('card');

<DropTarget.Root accept={card} label="Done" onDrop={({ source }) => move(source.payload.id)} />

Pass an array to take several kinds. source.payload is then the union of their payloads, and each kind’s matches narrows it back down:

Accepting two kinds

const task = Draggable.createKind<Task>('task');
const file = Draggable.createKind<Attachment>('file');

<DropTarget.Root
  accept={[task, file]}
  label="Inbox"
  onDrop={({ source }) => {
    if (file.matches(source)) {
      upload(source.payload.mime);
    } else if (task.matches(source)) {
      addTask(source.payload.id);
    }
  }}
/>

accept is required because every registration joins the same page-wide drag manager. A target without accept would accept every source on the page, including sources from unrelated drag-and-drop interactions.

Use DropTarget.anyKind for a target that intentionally accepts every drag, such as a trash zone or debug overlay. Its source.payload is unknown until a specific kind’s matches method narrows it:

Accepting anything

<DropTarget.Root
  accept={DropTarget.anyKind}
  label="Archive"
  onDrop={({ source }) => {
    if (card.matches(source)) {
      archive(source.payload.id);
    }
  }}
/>

For monitors and auto-scroll containers, accept is optional. Neither one resolves a drop target, so they can observe every drag by default. A monitor also receives onDrop when a drag completes on a target.

accept defines the supported kinds. Add canDrop to make a decision from the current drag source on every resolution. Use disabled to turn off the target regardless of the source.

Drop events

A target’s event handlers receive the drag source, the target as self, and the location history:

Reacting to drags over a target

<DropTarget.Root
  accept={card}
  label={zone.label}
  payload={zone}
  // Fires when this target enters the active stack. An enter-only hook; put
  // hover work in `onDrag`.
  onDragEnter={({ source }) => console.log(source.label, 'entered')}
  // Fires on the enter frame and on every animation frame the pointer moves
  // while the target stays in the stack. Hover-tracking (drop indicators,
  // snap-to-edge) belongs here.
  onDrag={({ location }) => {
    const { clientX, clientY } = location.current.input;
    highlightSlotAt(clientX, clientY);
  }}
  // Fires when this target leaves the active stack: the pointer moved off it,
  // or the drag ended.
  onDragLeave={() => clearHighlight()}
  // Fires on the innermost target only, when the drag is released over it. It
  // never fires on a cancel, and ancestor targets in the same stack don't
  // receive it.
  onDrop={({ source, self }) => move(source.payload, self.payload)}
/>

onDropTargetChange also fires on stack changes that don’t affect this target’s own membership (a nested descendant entered or left), and onDragStart fires only when a drag begins with this target already under the pointer. To observe every drop regardless of target depth, use a source’s onDrop or useDragMonitor.

Use onDragEnter and onDragLeave to implement hover intent. For example, start a timer in onDragEnter to expand a collapsed group after a delay, and clear it in onDragLeave:

Expanding a collapsed group on dwell

<DropTarget.Root
  accept={card}
  label={group.label}
  onDragEnter={() => dwellTimer.start(500, () => setExpanded(true))}
  onDragLeave={() => dwellTimer.clear()}
/>

Every handler receives the event payload first. Its second argument, eventDetails, contains the event reason and native event. For onDragLeave, the reason distinguishes leaving with the pointer or keyboard from ending the drag.

Attach data to a target

payload attaches data to the target and is available as self.payload in its callbacks. Use getPayload when the data depends on the current drag. It runs on each resolution with the same context as canDrop. TypeScript infers source.payload from accept and self.payload from the target’s payload.

Identifying the target

<DropTarget.Root
  accept={card}
  label={zone.label}
  payload={zone}
  onDrop={({ source, self }) => move(source.payload, self.payload)}
/>

A target can also declare its own kind. It is available as self.kind and on entries in location.dropTargets. Use it when a shared handler must distinguish several target kinds that accept the same drag. The kind’s matches method narrows the record type:

Telling two kinds of target apart

const dayCell = Draggable.createKind<DayCellData>('day-cell');

<DropTarget.Root kind={dayCell} accept={card} label={formatDay(dayMs)} payload={{ dayMs }} />

Most targets do not need a payload. A target rendered for each row or column can use that value directly in its handlers:

A target that already knows what it is

<DropTarget.Root
  accept={card}
  label={zone.label}
  onDrop={({ source }) => move(source.payload, zone)}
/>

Use payload when a monitor or another target must read the target’s identity from location.dropTargets. Those records have an unknown payload because any target on the page can appear there. When possible, read self.payload from the target’s own callbacks.

Read where in the target the pointer landed

self.getLocalPoint() returns the pointer’s position inside the target as a fraction of its box on each axis: 0 at the left or top edge, 1 at the right or bottom. Use it when the drop resolves to a value spread across the target, such as a time on a day column, rather than to the target itself:

A drop that means a time

<DropTarget.Root
  accept={event}
  label={formatDay(day)}
  payload={{ day }}
  onDrop={({ source, self }) => {
    // 0 at midnight, 1 at the end of the day, whatever the column's height.
    schedule(source.payload.id, day, self.getLocalPoint().y * MINUTES_PER_DAY);
  }}
/>

The first call measures the target. Later calls on the same record reuse that measurement. Records are rebuilt on every move.

Every record has this method. Entries in location.dropTargets measure against their own bounding boxes, so nested targets report different fractions for the same pointer.

The value is not clamped, because an ancestor in the stack can have the pointer outside its own box. Clamp it where your domain requires it. A target with no extent, including one detached since the drag began, reports { x: 0, y: 0 }.

Snap to steps

When the target represents fixed intervals such as 15-minute slots, weekday columns, or percentage stops, declare snap and read getSnappedLocalPoint(). It returns the same fraction, rounded to equal steps on each axis and clamped from 0 to 1. Rounding is symmetric around each step midpoint:

A day column of 15-minute slots

<DropTarget.Root
  accept={event}
  label={formatDay(day)}
  payload={{ day }}
  snap={{ y: 96 }}
  onDrop={({ source, self }) => {
    // Already a multiple of 15 minutes.
    schedule(source.payload.id, day, self.getSnappedLocalPoint().y * MINUTES_PER_DAY);
  }}
/>

Step counts divide the target’s bounding box rather than using pixels. Base UI measures the box when resolving the drag, so a viewport-sized column can declare its slots without knowing its dimensions, including during server rendering. Put the target on the grid element so headers and toolbars are excluded from the stepped area.

Pass a callback when the step count depends on the drag. It receives the same source, element, and input context as canDrop. It runs on the first snapped read for each resolution and may return undefined to skip snapping:

A step count derived from the drag

<DropTarget.Root
  accept={[meeting, task]}
  label="Calendar"
  // Meetings land on the half hour, tasks on the quarter hour.
  snap={({ source }) => ({ y: meeting.matches(source) ? 48 : 96 })}
/>

The callback also suits a count read from live state at drag time, such as a user-adjustable slot duration read through a ref. For plain render-state a static value works too: parameters are re-read on every resolution, so a re-render with a different snap needs no callback.

When moving an element, the committed value usually represents where the element lands rather than the pointer position. Pass { anchor: 'source' } to snap the dragged element’s leading edges while preserving the pointer’s grab offset:

Moving an event keeps its grab point under the pointer

<DropTarget.Root
  accept={event}
  label={formatDay(day)}
  snap={{ y: 96 }}
  onDrop={({ source, self }) => {
    // The chip's top edge, on-grid: no grab-offset bookkeeping.
    const start = self.getSnappedLocalPoint({ anchor: 'source' }).y * MINUTES_PER_DAY;
    move(source.payload.id, day, start);
  }}
/>

snap changes only the value reported by this target. To snap the preview and hit-test position for every target, use the snapToGrid modifier.

Name a target for screen readers

Pass label to name the target in the default keyboard-drag announcements. Moving over a labeled target announces “Water the plants on Done”, and dropping announces “Dropped Water the plants on Done.” With nested targets, the announcement names the innermost labeled target. Without a label, moves are silent and the drop announcement omits the destination.

A named drop zone

<DropTarget.Root label="Done" accept={task} onDrop={handleDrop} />

Nested drop targets

Drop targets can be nested. The innermost target that accepts the drag handles it, so nested zones behave predictably. Return false from canDrop on an inner target to let an outer one claim the drop instead, or set disabled to take a target out of play entirely, which likewise lets drags fall through to its ancestors.

Chart

Canvas

Frame

Drop into frame

index.tsx nesting.module.css

'use client';
import * as React from 'react';
import { Draggable } from '@base-ui/react/draggable';
import { DropTarget } from '@base-ui/react/drop-target';
import styles from './nesting.module.css';

type Location = 'palette' | 'canvas' | 'frame';

const layerKind = Draggable.createKind('drop-target/nested-layer');

function ChartIcon() {
  return (
    <svg className={styles.ChartIcon} width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2.5 13.5h11" fill="none" stroke="currentColor" />
      <rect x="3" y="8" width="2.25" height="4" fill="currentColor" />
      <rect x="6.875" y="5" width="2.25" height="7" fill="currentColor" />
      <rect x="10.75" y="2.5" width="2.25" height="9.5" fill="currentColor" />
    </svg>
  );
}

function ChartLayer() {
  return (
    <Draggable.Root label="Chart layer" kind={layerKind} role="button" className={styles.Layer}>
      <ChartIcon />
      Chart
    </Draggable.Root>
  );
}

export default function NestedDropTargets() {
  const [location, setLocation] = React.useState<Location>('palette');

  return (
    <div className={styles.Root}>
      <div className={styles.Palette}>{location === 'palette' && <ChartLayer />}</div>
      <DropTarget.Root
        className={styles.Canvas}
        label="Canvas"
        accept={layerKind}
        onDrop={() => setLocation('canvas')}
      >
        <span className={styles.Label}>Canvas</span>
        <div className={styles.CanvasLayers}>{location === 'canvas' && <ChartLayer />}</div>
        <DropTarget.Root
          className={styles.Frame}
          label="Frame"
          accept={layerKind}
          onDrop={() => setLocation('frame')}
        >
          <span className={styles.Label}>Frame</span>
          <div className={styles.FrameLayers}>
            {location === 'frame' ? (
              <ChartLayer />
            ) : (
              <span className={styles.Empty}>Drop into frame</span>
            )}
          </div>
        </DropTarget.Root>
      </DropTarget.Root>
    </div>
  );
}

Returning false means “skip this target,” not “block this area.” The engine keeps looking through the nested targets under the pointer, so another target can still receive the drop. This is useful when an inner target wants to defer to its parent.

Use 'reject' when a rule must block the drop everywhere within a target. For example, if a full column returns false, one of the cards inside it could still accept the drop. Returning 'reject' from the column prevents the drop from resolving to that card, the column, or an ancestor. While the pointer is over the rejecting column, data-rejected is present so you can show that the column is full:

Rejecting every drop inside a full column

<DropTarget.Root
  accept={card}
  label={column.title}
  canDrop={() => (column.cards.length < limit ? true : 'reject')}
  className="Column"
/>

.Column[data-rejected] {
  border-color: red;
}

Track the drag-over state

data-drag-over is present while an accepted drag is over a target or one of its descendants. With nested targets, every accepted target under the pointer receives data-drag-over; only the innermost one, which would handle the drop, also receives data-drag-over-innermost:

<DropTarget.Root accept={card} label="Done" className="Zone" />

Highlight the innermost target

.Zone[data-drag-over-innermost] {
  outline: 2px solid blue;
}

data-accepting is present on every enabled, tracked target whose accept prop matches the active drag, from pickup until the drag ends. Unlike data-drag-over, it does not depend on the pointer’s location. Use it to reveal all targets configured for that kind as soon as dragging starts:

<DropTarget.Root accept={card} label="Done" className="Zone" />

Highlight every matching target

.Zone[data-accepting] {
  outline: 2px dashed blue;
}

Among enabled targets with trackDragOver enabled, data-accepting is based only on the target’s accept prop. A target can therefore have data-accepting and still refuse the drop when canDrop runs. Use the attribute to show which targets support the dragged item; use canDrop for additional rules that are checked when the drag moves over a target. If canDrop returns 'reject', style that target with data-rejected.

If a target does not use these drag-feedback attributes, set trackDragOver={false}. The target still participates in drop resolution and its callbacks still fire, but data-drag-over, data-drag-over-innermost, data-accepting, and data-rejected are not added. This also avoids re-rendering the target as the drag moves, which can be useful when many rows in a list are drop targets:

A target that renders no drag-over feedback

<DropTarget.Root label={row.label} accept={card} trackDragOver={false} onDrop={handleDrop} />

Both a source and a target

A sortable list item is picked up as well as dropped on. Pass a DropTarget.Root to the Draggable.Root’s render prop and both roles land on one element:

One element, both roles

const itemKind = Draggable.createKind<string>('item');

<Draggable.Root
  label={item.label}
  kind={itemKind}
  payload={item.id}
  render={<DropTarget.Root accept={itemKind} label={item.label} payload={item.id} />}
/>

The sortable list example builds a full reorderable list on top of this.

API reference

The dragged item’s payload type and this target’s payload flow through every event: a target with an accept and a payload hands both to onDrop, canDrop, and the rest. The generated tables below render those signatures at the default types (unknown/undefined, or any where both overloads are shown), because the reference is extracted without concrete type arguments. Read them as “what this target’s accept and payload resolve to”.

Root

labelstring—

Name: label
Description: Human-readable name of this drop target, used by the default screen-reader announcements for keyboard drags to name where the item is and where it landed.
Type: string | undefined

accept^*Union—

Name: accept
Type: | NonNullable<DragAccept<TSourceData> | undefined> | (DragKind<TPayload | unknown> & AnyDragAccept) | (DragKind<TPayload | unknown>[] & AnyDragAccept)

canDropfunction—

Name: canDrop
Description: Predicate for whether this target should be considered a candidate for the current drag. Runs after accept.

Return false to skip this target for the current resolution. Base UI continues through its ancestors, so a parent target can receive the drop. This differs from ignoring the drop inside onDrop, which does not give a parent target a chance.

Return 'reject' to block every drop at this position. Descendants, this target, and ancestors cannot receive the drop. While the drag is over the target, it has data-rejected. Use this for container rules such as a capacity limit. Returning false would allow an item inside the container to receive the drop.
Type: | (( parameters: DropTargetResolutionContext<TSourceData>, ) => boolean | 'reject') | (( parameters: DropTargetResolutionContext< TPayload | unknown >, ) => boolean | 'reject') | undefined

getPayloadfunction—

Name: getPayload
Description: Resolves payload data from the current drag context.
Type: | DropTargetPayloadGetter<TSourceData, TLocalData> | (( context: DropTargetResolutionContext<TSourceData>, ) => undefined) | DropTargetPayloadGetter<TPayload | unknown, TLocalData> | (( context: DropTargetResolutionContext< TPayload | unknown >, ) => undefined) | undefined

kindUnion—

Name: kind
Description: The target kind created with Draggable.createKind. It is available as self.kind and on entries in location.dropTargets. Use the kind’s matches method to distinguish target kinds and narrow their payload types. Its payload type must match this target’s payload.

Distinct from accept, which declares the source kinds this target takes.
Type: DragKind<TLocalData> | DragKind<undefined> | undefined

onDragfunction—

Name: onDrag
Description: Event handler called on the frame this target enters the active stack, right after onDragEnter, and on every rAF tick the pointer moves while the target remains in the stack. Put hover-tracking work here and use onDragEnter for enter-only side effects.
Type: | (( parameters: DropTargetEvent< 'onDrag', TSourceData, TLocalData >, eventDetails: DragMoveEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDrag', TSourceData, undefined >, eventDetails: DragMoveEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDrag', TPayload | unknown, TLocalData >, eventDetails: DragMoveEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDrag', TPayload | unknown, undefined >, eventDetails: DragMoveEventDetails, ) => void) | undefined

onDragEnterfunction—

Name: onDragEnter
Description: Event handler called when this target enters the active stack.
Type: | (( parameters: DropTargetEvent< 'onDragEnter', TSourceData, TLocalData >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragEnter', TSourceData, undefined >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragEnter', TPayload | unknown, TLocalData >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragEnter', TPayload | unknown, undefined >, eventDetails: DropTargetChangeEventDetails, ) => void) | undefined

onDragLeavefunction—

Name: onDragLeave
Description: Event handler called when this target leaves the active stack, because the pointer moved away or the drag ended. eventDetails.reason identifies whether the pointer or keyboard left the target, or the drag ended.
Type: | (( parameters: DropTargetEvent< 'onDragLeave', TSourceData, TLocalData >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragLeave', TSourceData, undefined >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragLeave', TPayload | unknown, TLocalData >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragLeave', TPayload | unknown, undefined >, eventDetails: DropTargetChangeEventDetails, ) => void) | undefined

onDragStartfunction—

Name: onDragStart
Description: Event handler called when a matching drag starts while this target is already under the pointer. It does not fire for drags that start elsewhere; use a monitor’s onDragStart to observe every drag.
Type: | (( parameters: DropTargetEvent< 'onDragStart', TSourceData, TLocalData >, eventDetails: DragStartEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragStart', TSourceData, undefined >, eventDetails: DragStartEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragStart', TPayload | unknown, TLocalData >, eventDetails: DragStartEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDragStart', TPayload | unknown, undefined >, eventDetails: DragStartEventDetails, ) => void) | undefined

onDropfunction—

Name: onDrop
Description: Event handler called on the innermost active drop target only, when the user releases the drag over it. Ancestor targets in the same stack do not receive onDrop, and it never fires on a cancel. To observe every drag end regardless of target depth or cancellation, use the source’s or a monitor’s onDragEnd.
Type: | (( parameters: DropEvent<TSourceData, TLocalData>, eventDetails: { reason: 'drop'; event: PointerEvent | KeyboardEvent; }, ) => void) | (( parameters: DropEvent<TSourceData, undefined>, eventDetails: { reason: 'drop'; event: PointerEvent | KeyboardEvent; }, ) => void) | (( parameters: DropEvent<TPayload | unknown, TLocalData>, eventDetails: { reason: 'drop'; event: PointerEvent | KeyboardEvent; }, ) => void) | (( parameters: DropEvent<TPayload | unknown, undefined>, eventDetails: { reason: 'drop'; event: PointerEvent | KeyboardEvent; }, ) => void) | undefined

onDropTargetChangefunction—

Name: onDropTargetChange
Description: Event handler called when the active drop targets change, including changes that don’t affect this target’s own membership, such as a nested descendant entering or leaving while this ancestor stays in the stack. Use onDragEnter and onDragLeave for this target’s own enter and leave.
Type: | (( parameters: DropTargetEvent< 'onDropTargetChange', TSourceData, TLocalData >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDropTargetChange', TSourceData, undefined >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDropTargetChange', TPayload | unknown, TLocalData >, eventDetails: DropTargetChangeEventDetails, ) => void) | (( parameters: DropTargetEvent< 'onDropTargetChange', TPayload | unknown, undefined >, eventDetails: DropTargetChangeEventDetails, ) => void) | undefined

payloadTLocalData—

Name: payload
Description: Static payload data. Function values are preserved without being invoked.
Type: TLocalData | undefined

snapUnion—

Name: snap
Description: Divides the target’s border box into equal steps for getSnappedLocalPoint(). For example, { y: 96 } creates 15-minute slots in a day column, and { x: 7, y: 6 } creates a month grid.

Step counts do not depend on the target’s pixel size. Base UI measures the target when resolving a drag. Pass a static value or a callback that receives the same context as canDrop. The callback runs on the first snapped read for each resolution. Return undefined to skip snapping.

This differs from snapToGrid, which snaps the drag position for every target. snap changes only the value reported by this target.
Type: | DragSnapSteps | (( context: DropTargetResolutionContext<TSourceData>, ) => DragSnapSteps | undefined) | (( context: DropTargetResolutionContext< TPayload | unknown >, ) => DragSnapSteps | undefined) | undefined

trackDragOverbooleantrue

Name: trackDragOver
Description: Whether to update drag-over state and its data attributes. Set to false when the target renders no drag-over feedback; drag callbacks still fire.
Type: boolean | undefined
Default: true

disabledbooleanfalse

Name: disabled
Description: Whether the drop target should ignore user interaction. A disabled target is skipped by target resolution as if it weren’t registered, so drags fall through to ancestor targets. A hovered target disabled mid-drag leaves the active stack, with its onDragLeave, on the next resolution.
Type: boolean | undefined
Default: false

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: DropTarget.Root.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: DropTarget.Root.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: DropTarget.Root.State, ) => ReactElement) | undefined

data-disabled

Present while the drop target is disabled.

data-accepting

Present while a drag this target accepts is active, regardless of pointer position. Use it to highlight every compatible drop target. Absent when trackDragOver is false.

data-drag-over

Present while a matching drag source is over the target or a nested descendant. Absent when trackDragOver is false.

data-drag-over-innermost

Present while the target is the innermost one under the source. Absent when trackDragOver is false.

data-drop-target

Present while the element is registered as a drop target. Base UI also uses it to resolve targets during hit testing.

data-rejected

Present while canDrop returns 'reject' for the current position. Use it to display feedback such as a full column. Absent when trackDragOver is false.

Attribute	Description	-
`data-disabled`	Present while the drop target is disabled.
`data-accepting`	Present while a drag this target accepts is active, regardless of pointer position. Use it to highlight every compatible drop target. Absent when `trackDragOver` is `false`.
`data-drag-over`	Present while a matching drag source is over the target or a nested descendant. Absent when `trackDragOver` is `false`.
`data-drag-over-innermost`	Present while the target is the innermost one under the source. Absent when `trackDragOver` is `false`.
`data-drop-target`	Present while the element is registered as a drop target. Base UI also uses it to resolve targets during hit testing.
`data-rejected`	Present while `canDrop` returns `'reject'` for the current position. Use it to display feedback such as a full column. Absent when `trackDragOver` is `false`.

DropTarget.Root.PropsHide

Re-Export of Root props as DropTargetRootProps

DropTarget.Root.StateHide

type DropTargetRootState = {
  /**
   * Whether a matching drag source is currently over this target or a nested
   * descendant. Always `false` when `trackDragOver` is `false`.
   */
  dragOver: boolean;
  /**
   * Whether this target accepts the current drag, regardless of pointer position.
   * Use it to highlight all compatible drop targets. It is `false` when no drag is
   * active, the target is disabled, or `trackDragOver` is `false`. The value is
   * based on `accept`; `canDrop` is evaluated only for the current position.
   */
  accepting: boolean;
  /**
   * Whether this is the innermost active target. A nested ancestor has `dragOver`
   * true but `dragOverInnermost` false while a descendant target is active. Always
   * `false` when `trackDragOver` is `false`.
   */
  dragOverInnermost: boolean;
  /**
   * Whether `canDrop` returned `'reject'` for the current position. Use it to
   * display feedback such as a full column. It is mutually exclusive with
   * `dragOver` and always `false` when `trackDragOver` is `false`.
   */
  rejected: boolean;
  /** Whether the drop target is disabled. */
  disabled: boolean;
}

DropTarget.Root.PropsWithPayloadHide

type DropTargetRootPropsWithPayload<TSourceData, TLocalData> = (
  | { payload: TLocalData; getPayload?: undefined }
  | { payload?: undefined; getPayload: DropTargetPayloadGetter<TSourceData, TLocalData> }
) & {
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component's state.
   */
  className?: string | ((state: DropTarget.Root.State) => string | undefined);
  /**
   * Style applied to the element, or a function that
   * returns a style object based on the component's state.
   */
  style?: React.CSSProperties | ((state: DropTarget.Root.State) => React.CSSProperties | undefined);
  /**
   * Allows you to replace the component's HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render?: ReactElement | ((props: HTMLProps, state: DropTarget.Root.State) => ReactElement);
  /**
   * Human-readable name of this drop target, used by the default screen-reader
   * announcements for keyboard drags to name where the item is and where it landed.
   */
  label?: string;
  /**
   * Event handler called on the frame this target enters the active stack, right
   * after `onDragEnter`, and on every rAF tick the pointer moves while the target
   * remains in the stack. Put hover-tracking work here and use `onDragEnter` for
   * enter-only side effects.
   */
  onDrag?: (
    parameters: DropTargetEvent<'onDrag', TSourceData, TLocalData>,
    eventDetails: DragMoveEventDetails,
  ) => void;
  /** Event handler called when this target enters the active stack. */
  onDragEnter?: (
    parameters: DropTargetEvent<'onDragEnter', TSourceData, TLocalData>,
    eventDetails: DropTargetChangeEventDetails,
  ) => void;
  /**
   * Event handler called when this target leaves the active stack, because the
   * pointer moved away or the drag ended. `eventDetails.reason` identifies whether
   * the pointer or keyboard left the target, or the drag ended.
   */
  onDragLeave?: (
    parameters: DropTargetEvent<'onDragLeave', TSourceData, TLocalData>,
    eventDetails: DropTargetChangeEventDetails,
  ) => void;
  /**
   * Event handler called when a matching drag starts while this target is already
   * under the pointer. It does not fire for drags that start elsewhere; use a
   * monitor's `onDragStart` to observe every drag.
   */
  onDragStart?: (
    parameters: DropTargetEvent<'onDragStart', TSourceData, TLocalData>,
    eventDetails: DragStartEventDetails,
  ) => void;
  /**
   * Event handler called on the innermost active drop target only, when the user
   * releases the drag over it. Ancestor targets in the same stack do not receive
   * `onDrop`, and it never fires on a cancel. To observe every drag end regardless of
   * target depth or cancellation, use the source's or a monitor's `onDragEnd`.
   */
  onDrop?: (
    parameters: DropEvent<TSourceData, TLocalData>,
    eventDetails: { reason: 'drop'; event: PointerEvent | KeyboardEvent },
  ) => void;
  accept: NonNullable<DragAccept<TSourceData> | undefined>;
  /**
   * The target kind created with `Draggable.createKind`. It is available as
   * `self.kind` and on entries in `location.dropTargets`. Use the kind's `matches`
   * method to distinguish target kinds and narrow their payload types. Its payload
   * type must match this target's `payload`.
   *
   * Distinct from `accept`, which declares the **source** kinds this target takes.
   */
  kind?: DragKind<TLocalData>;
  /**
   * Whether the drop target should ignore user interaction. A disabled target is
   * skipped by target resolution as if it weren't registered, so drags fall through
   * to ancestor targets. A hovered target disabled mid-drag leaves the active stack,
   * with its `onDragLeave`, on the next resolution.
   * @default false
   */
  disabled?: boolean;
  /**
   * Predicate for whether this target should be considered a candidate for the
   * current drag. Runs after `accept`.
   *
   * Return `false` to skip this target for the current resolution. Base UI continues
   * through its ancestors, so a parent target can receive the drop. This differs from
   * ignoring the drop inside `onDrop`, which does not give a parent target a chance.
   *
   * Return `'reject'` to block every drop at this position. Descendants, this target,
   * and ancestors cannot receive the drop. While the drag is over the target, it has
   * `data-rejected`. Use this for container rules such as a capacity limit. Returning
   * `false` would allow an item inside the container to receive the drop.
   */
  canDrop?: (parameters: DropTargetResolutionContext<TSourceData>) => boolean | 'reject';
  /**
   * Divides the target's border box into equal steps for
   * `getSnappedLocalPoint()`. For example, `{ y: 96 }` creates 15-minute slots in
   * a day column, and `{ x: 7, y: 6 }` creates a month grid.
   *
   * Step counts do not depend on the target's pixel size. Base UI measures the
   * target when resolving a drag. Pass a static value or a callback that receives
   * the same context as `canDrop`. The callback runs on the first snapped read for
   * each resolution. Return `undefined` to skip snapping.
   *
   * This differs from `snapToGrid`, which snaps the drag position for every target.
   * `snap` changes only the value reported by this target.
   */
  snap?:
    | DragSnapSteps
    | ((context: DropTargetResolutionContext<TSourceData>) => DragSnapSteps | undefined);
  /**
   * Event handler called when the active drop targets change, including changes that
   * don't affect this target's own membership, such as a nested descendant entering
   * or leaving while this ancestor stays in the stack. Use `onDragEnter` and
   * `onDragLeave` for this target's own enter and leave.
   */
  onDropTargetChange?: (
    parameters: DropTargetEvent<'onDropTargetChange', TSourceData, TLocalData>,
    eventDetails: DropTargetChangeEventDetails,
  ) => void;
  /**
   * Whether to update drag-over state and its data attributes. Set to `false`
   * when the target renders no drag-over feedback; drag callbacks still fire.
   * @default true
   */
  trackDragOver?: boolean;
  accept: NonNullable<DragAccept<TSourceData> | undefined>;
}

createKind

Alias of Draggable.createKind, provided on the DropTarget namespace so an integration that only renders targets does not need to import the draggable entry point.

createGlobalKind

Creates a globally interned drag kind for integrations where independently evaluated bundles must match without sharing the same kind value.

const card = Draggable.createGlobalKind<Card>('myapp/card');

The key is the runtime identity, so every call with the same key matches, including calls made by another copy of the bundle. It must be namespaced (for example, 'myapp/card') because using the same key with incompatible payload types bypasses TypeScript and causes the integrations to exchange the wrong payload at runtime. Prefer createKind when the kind value can be shared directly.

Parameters

key^*string—

Name: key
Description: A namespaced global key such as 'myapp/card'.
Type: string

Return value

DragKind

namestring

Name: name
Description: The name or global key used to create this kind. This is not an accessible name. Use label on a draggable or drop target instead.
Type: string

idsymbol

Name: id
Description: The kind’s runtime identity. createKind creates a fresh symbol for each call; createGlobalKind interns it on the namespaced key.
Type: symbol

matchesmatches

Name: matches
Description: Whether this drag source is of this kind, narrowing its payload to TPayload.
Type: (type matches = | ((source: { element: HTMLElement; label: string | undefined; kind: symbol; dragHandle: Element | null; payload: unknown; }) => boolean) | ((target: { element: Element; label: string | undefined; kind: symbol | undefined; payload: unknown; getLocalPoint: unknown; getSnappedLocalPoint: unknown; }) => boolean))