dnd-core

What is dnd-core?

The dnd-core package is a low-level drag and drop engine that powers complex drag and drop interfaces. It provides the core functionality needed to enable drag and drop interactions within web applications. This package is often used as a foundation for building more complex drag and drop libraries and provides developers with the tools to create custom drag and drop experiences.

What are dnd-core's main functionalities?

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
}

Other packages similar to dnd-core

react-dnd

react-dnd is a higher-level abstraction built on top of dnd-core specifically for React applications. It provides a set of React hooks and components to easily enable drag and drop functionality within React components. Compared to dnd-core, react-dnd is more accessible for React developers but less flexible for non-React projects.

react-beautiful-dnd

react-beautiful-dnd is another React-specific drag and drop library that focuses on creating beautiful, fluid drag and drop experiences with minimal setup. It differs from dnd-core by providing a more opinionated, high-level API that abstracts away much of the complexity involved in setting up drag and drop interactions. It's designed for vertical and horizontal lists and does not require manual handling of drag sources and drop targets like dnd-core.

README

dnd-core

Drag and Drop stateful engine - no GUI.

This is a clean implementation of drag and drop primitives that does not depend on the browser. It powers React DnD internally.

Wat?

To give you a better idea:

• There is no DOM here
• We let you define drop target and drag source logic
• We let you supply custom underlying implementations (console, DOM via jQuery, React, React Native, whatever)
• We manage drag source and drop target interaction

This was written to support some rather complicated scenarios that were too hard to implement in React DnD due to its current architecture:

• Mocking drag and drop interaction in tests
• Full support for arbitrary nesting and handling drag sources and drop targets
• Dragging multiple items at once
• Even when source is removed, letting another drag source “represent it” (e.g. card disappeared from one Kanban list, reappeared in another one)

As it turns out, these problems are much easier to solve when DOM is thrown out of the window.

What's the API like?

Tests should give you some idea. You register drag sources and drop targets, connect a backend (you can use barebones TestBackend or implement a fancy real one yourself), and your drag sources and drop targets magically begin to interact.