dnd-core

Drag Source and Drop Target

This feature allows you to define drag sources and drop targets within your application. You can register these elements with the drag and drop manager, enabling you to create interactive drag and drop interfaces.

import { DragDropManager, BackendFactory } from 'dnd-core';
const backend = BackendFactory; // Use an appropriate backend for your environment
const manager = new DragDropManager(backend);
// Register drag sources and drop targets with the manager

Custom Drag Layer

This feature enables the creation of a custom drag layer. You can use the drag layer monitor to track the state of the drag operation and render a custom drag preview or layer based on the item being dragged, its type, and its current position.

import { DragLayerMonitor, XYCoord } from 'dnd-core';
function CustomDragLayer(monitor: DragLayerMonitor) {
  const item = monitor.getItem();
  const itemType = monitor.getItemType();
  const initialOffset = monitor.getInitialSourceClientOffset();
  const currentOffset = monitor.getSourceClientOffset();
  const isDragging = monitor.isDragging();
  // Render custom drag layer based on the current state
}

Monitor Drag State

This feature allows you to monitor the state of drag operations. You can use the drag drop monitor to check if an item is currently being dragged, what type of item it is, and perform actions based on this information, enabling dynamic responses to drag and drop interactions.

import { DragDropMonitor } from 'dnd-core';
function handleDragUpdate(monitor: DragDropMonitor) {
  const isDragging = monitor.isDragging();
  const itemType = monitor.getItemType();
  // Perform actions based on the current drag state
}