Skip to main content

Drop Operations

Overview​

This model defines the configuration structure for allowed drop behaviors within the builder's drag-and-drop system. It is used by the BaseDropZone, DropZone, and DragDropZone core classes, as well as by the DropListDirective, to control which drag-and-drop operations (e.g., move, copy, reorder) are permitted during an interaction.

DropOperations​

import type { Operation, Availability } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';

export type DropOperations = Partial<Record<Operation, Availability>>;

Represents a mapping between a drag-and-drop operation (e.g. move, copy) and its availability (allowed, forbidden, etc.). Using Partial means that not all operations must be specified.

Example​

import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { attachInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';
import type { DropOperations } from './drop-operations.model';

const element = document.querySelector('#my-block')!;

dropTargetForElements({
  element,
  getData: ({ input, element }) => {
    const instruction = attachInstruction(
      { id: 'block-1' },
      {
        input,
        element,
        operations: getDropOperations(),
      },
    );

    return instruction;
  },
});

function getDropOperations(): DropOperations {
  return {
    'reorder-before': 'available',
    'reorder-after': 'available',
  };
}

See Also​