1 | [![npm package](https://img.shields.io/npm/v/dnd-core.svg?style=flat-square)](https://www.npmjs.org/package/dnd-core)
|
2 | [![Build Status](https://travis-ci.org/react-dnd/dnd-core.svg?branch=main)](https://travis-ci.org/react-dnd/dnd-core)
|
3 | [![Test Coverage](https://codeclimate.com/github/react-dnd/dnd-core/badges/coverage.svg)](https://codeclimate.com/github/react-dnd/dnd-core)
|
4 |
|
5 | # dnd-core
|
6 |
|
7 | Drag and Drop stateful engine - no GUI.
|
8 |
|
9 | This is a clean implementation of drag and drop primitives that does not depend on the browser.
|
10 | It powers [React DnD](https://github.com/react-dnd/react-dnd) internally.
|
11 |
|
12 | ## Wat?
|
13 |
|
14 | To give you a better idea:
|
15 |
|
16 | - There is no DOM here
|
17 | - We let you define drop target and drag source logic
|
18 | - We let you supply custom underlying implementations (console, DOM via jQuery, React, React Native, _whatever_)
|
19 | - We manage drag source and drop target interaction
|
20 |
|
21 | This was written to support some rather complicated scenarios that were too hard to implement in [React DnD](https://github.com/react-dnd/react-dnd) due to its current architecture:
|
22 |
|
23 | - [Mocking drag and drop interaction in tests](https://github.com/react-dnd/react-dnd/issues/55)
|
24 | - [Full support for arbitrary nesting and handling drag sources and drop targets](https://github.com/react-dnd/react-dnd/issues/87)
|
25 | - [Dragging multiple items at once](https://github.com/react-dnd/react-dnd/issues/14)
|
26 | - [Even when source is removed, letting another drag source “represent it” (e.g. card disappeared from one Kanban list, reappeared in another one)](https://github.com/react-dnd/react-dnd/pull/64#issuecomment-76118757)
|
27 |
|
28 | As it turns out, these problems are much easier to solve when DOM is thrown out of the window.
|
29 |
|
30 | ## What's the API like?
|
31 |
|
32 | [Tests](https://github.com/react-dnd/dnd-core/tree/main/test) 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.
|
33 |
|
34 | ![](http://i.imgur.com/6l8CpxZ.png)
|