Droppable

Droppable component is a utility that designates an element as a drop target for draggable items. It enables an area to accept dropped elements, provide visual feedback when a draggable is over it, and perform drop handling.

Usage

To import and use the Droppable component in your application, use the following code snippet:

import { DragDrop, Draggable, Droppable } from '@syncfusion/react-base';

<DragDrop>
  <div>
      <Draggable>
          <div className="draggable">Drag me</div>
      </Draggable>
      <Droppable onDrop={handleDrop}>
          <div className="droppable">Drop here</div>
      </Droppable>
  </div>
</DragDrop>

import { DragDrop, Draggable, Droppable } from '@syncfusion/react-base';

<DragDrop>
  <div>
      <Draggable>
          <div className="draggable">Drag me</div>
      </Draggable>
      <Droppable onDrop={handleDrop}>
          <div className="droppable">Drop here</div>
      </Droppable>
  </div>
</DragDrop>

Demos

Explore the demos of the React Droppable component. Refer to this page.

Props

The following table outlines the props for the Draggable component:

Name	Type	Default	Description
accept	string	-	Defines the selector for draggable element to be accepted by the droppable.
scope	string	-	Defines the scope value to group sets of draggable and droppable items. A draggable with the same scope value will only be accepted by the droppable.

Events

The following table outlines the events for the Droppable component:

Name	Type	Description
onDrop	(args: DropEvent) => void	Specifies the callback function, which will be triggered while drag element is dropped in droppable.
onOut	(args: OutEvent) => void	Specifies the callback function, which will be triggered while drag element is moved out of droppable element.
onOver	(args: OverEvent) => void	Specifies the callback function, which will be triggered while drag element is moved over droppable element.

Droppable

Usage

Demos

Props

Events

Enhance your React apps with Syncfusion components today