Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

dnd-core

Package Overview
Dependencies
Maintainers
5
Versions
93
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dnd-core

Drag and drop sans the GUI

  • 14.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.8M
decreased by-19.61%
Maintainers
5
Weekly downloads
 
Created

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

FAQs

Package last updated on 09 Mar 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc