useDroppable

Create droppable targets with the useDroppable hook.

Usage

The useDroppable hook requires a unique id and returns a ref callback.

import {useDroppable} from '@dnd-kit/solid';

function Droppable(props) {
  const {ref, isDropTarget} = useDroppable({id: props.id});

  return (
    <div ref={ref} data-highlight={isDropTarget()}>
      {props.children}
    </div>
  );
}

Input

id · UniqueIdentifier · required

A unique identifier for this droppable instance.

accept · string | string[]

The types of draggable elements this droppable accepts.

type · string

The type of this droppable element.

collisionDetector · CollisionDetector

A custom collision detection algorithm.

disabled · boolean

Whether the droppable is disabled.

data · Data

Custom data to attach to this droppable instance.

Output

ref · (element: Element) => void

A callback ref to attach to the droppable element.

isDropTarget · () => boolean

Whether this element is currently a drop target. Call as isDropTarget() in JSX.

droppable · Droppable

The underlying Droppable instance.