dnd-core
Advanced tools
Package description
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.
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 managerCustom 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
}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 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.
Changelog
<small>11.1.1 (2020-05-26)</small>
getManager() method (#1570) (4ad004c), closes #1570Readme
Drag and drop sans the GUI.
This is a clean implementation of drag and drop primitives that does not depend on the browser. It powers React DnD internally.
To give you a better idea:
This was written to support some rather complicated scenarios that were too hard to implement in React DnD due to its current architecture:
As it turns out, these problems are much easier to solve when DOM is thrown out of the window.
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.
FAQs
Drag and drop sans the GUI
The npm package dnd-core receives a total of 1,656,586 weekly downloads. As such, dnd-core popularity was classified as popular.
We found that dnd-core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ecma TC39 is meeting this week and has moved key ECMAScript proposals forward, advancing Deferred Import Evaluation, Error.isError(), RegExp Escaping, and Promise.try to the next stages.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.