ContextQMD
Back to Dnd Kit

useDroppable

apps/docs/solid/hooks/use-droppable.mdx

latest3.1 KB
Original Source

import {CodeSandbox} from '/snippets/sandbox.mdx'; import {draggableStyles, droppableStyles} from '/snippets/code.mdx';

<CodeSandbox template="solid" files={{ 'App.tsx': {code: app, hidden: true}, 'Droppable.tsx': {code, active: true}, 'styles.css': {code: draggableStyles + '\n\n' + droppableStyles + '\n\n' + containerStyles, hidden: true}, }} height={350} previewHeight={400} hero />

Usage

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

tsx
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

<ParamField path="id" type="UniqueIdentifier" required> A unique identifier for this droppable instance. </ParamField> <ParamField path="accept" type="string | string[]" optional> The types of draggable elements this droppable accepts. </ParamField> <ParamField path="type" type="string" optional> The type of this droppable element. </ParamField> <ParamField path="collisionDetector" type="CollisionDetector" optional> A custom collision detection algorithm. </ParamField> <ParamField path="disabled" type="boolean" optional> Whether the droppable is disabled. </ParamField> <ParamField path="data" type="Data" optional> Custom data to attach to this droppable instance. </ParamField>

Output

<ResponseField name="ref" type="(element: Element) => void"> A callback ref to attach to the droppable element. </ResponseField> <ResponseField name="isDropTarget" type="() => boolean" note="accessor"> Whether this element is currently a drop target. Call as `isDropTarget()` in JSX. </ResponseField> <ResponseField name="droppable" type="Droppable"> The underlying `Droppable` instance. </ResponseField>

export const app = ` import {createSignal} from 'solid-js'; import {DragDropProvider, useDraggable} from '@dnd-kit/solid'; import {Droppable} from './Droppable'; import './styles.css';

function Draggable() { const {ref} = useDraggable({id: 'draggable'}); return <button ref={ref} class="btn">draggable</button>; }

export default function App() { const [parent, setParent] = createSignal(undefined); return ( <DragDropProvider onDragEnd={(event) => { if (event.canceled) return; setParent(event.operation.target?.id); }} > <div class="container"> {parent() == null ? <Draggable /> : null} <Droppable> {parent() === 'droppable' ? <Draggable /> : null} </Droppable> </div> </DragDropProvider> ); } `.trim();

export const code = ` import {useDroppable} from '@dnd-kit/solid';

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

return ( <div ref={ref} class={isDropTarget() ? "droppable active" : "droppable"}> {props.children} </div> ); } `.trim();

export const containerStyles = .container { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 20px; align-items: center; max-width: 700px; margin: 0 auto; }.trim();