# dnd-multi-backend

> Multi Backend system compatible with DnD Core / React DnD

Latest version **9.0.0** (published 2025-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install dnd-multi-backend
pnpm add dnd-multi-backend
yarn add dnd-multi-backend
bun add dnd-multi-backend
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 9.0.0 |
| Published | 2025-01-27 |
| First published | 2017-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Louis Brunner |
| Maintainers | louisbrunner |
| Keywords | agnostic, dnd, drag, drop, backend, multi |

## Links

- npm: https://www.npmjs.com/package/dnd-multi-backend
- Repository: https://github.com/LouisBrunner/dnd-multi-backend
- Homepage: https://louisbrunner.github.io/dnd-multi-backend/packages/dnd-multi-backend/
- Issues: https://github.com/LouisBrunner/dnd-multi-backend/issues
- Funding: https://github.com/sponsors/LouisBrunner
- npm.io page: https://npm.io/package/dnd-multi-backend

## Recent versions

- 9.0.0 (latest) — 2025-01-27
- 9.0.1-rc0001 (next) — 2025-06-16
- 9.0.0-rc0001 — 2024-12-20
- 8.1.2 — 2024-12-14
- 8.1.1 — 2024-12-12
- 8.1.0 — 2024-12-12
- 8.0.3 — 2023-09-21
- 8.0.2 — 2023-09-06
- 8.0.1 — 2023-06-07
- 8.0.0 — 2022-12-13
- 8.0.0-alpha.1 — 2022-12-10
- 7.1.3 — 2022-12-08
- 8.0.0-alpha.0 — 2022-12-06
- 7.1.2 — 2022-12-06
- 7.1.0 — 2022-08-31
- … 36 more at https://npm.io/package/dnd-multi-backend/versions

## README

# DnD Multi Backend [![NPM Version][npm-image]][npm-url] [![dependencies Status][deps-image]][deps-url] [![devDependencies Status][deps-dev-image]][deps-dev-url]

[Try it here!](https://louisbrunner.github.io/dnd-multi-backend/examples/dnd-multi-backend.html)

This project is a Drag'n'Drop backend compatible with [DnD Core](https://github.com/react-dnd/react-dnd/tree/master/packages/dnd-core).
It enables your application to use different DnD backends depending on the situation. This package is completely frontend-agnostic, you can refer to [this page](https://github.com/LouisBrunner/dnd-multi-backend) for frontend-specific packages. This means if your front-end is not yet supported, you'll have to roll out your own.

See the [migration section](#migrating) for instructions when switching from `5.0.x` or `6.x.x`.

## Installation

```sh
npm install -S dnd-multi-backend
```

## Usage & Example

You should only use this package if your framework is not in the supported list:
 - [React](../react-dnd-multi-backend)
 - [Angular](https://github.com/cormacrelf/angular-skyhook)

In this case, you will need to write a [custom pipeline](../react-dnd-multi-backend#create-a-custom-pipeline) including as many `dnd-core` backends as you wish. See also the [examples](examples/) for more information.

```js
import { createDragDropManager } from 'dnd-core'
import { MultiBackend } from 'dnd-multi-backend'

// Define the backend and pipeline
class HTML5Backend {
  constructor(manager) {
    this.manager = manager
  }

  setup() {}
  teardown() {}

  connectDragSource(sourceId, node, options) {
    ...

    return () => {}
  }

  connectDragPreview(previewId, node, options) {
    ...

    return () => {}
  }

  connectDropTarget(targetId, node, options) {
    ...

    return () => {}
  }
}

...

const pipeline = {
  backends: [
    {
      id: 'html5',
      backend: HTML5Backend,
      transition: MouseTransition,
    },
    {
      id: 'touch',
      backend: TouchBackend,
      preview: true,
      transition: TouchTransition,
    },
  ],
}

// Setup the manager
const manager = createDragDropManager(MultiBackend, {}, pipeline)
const registry = manager.getRegistry()

// Setup your DnD logic
class Source {
  ...

  canDrag() {}
  beginDrag() {}
  isDragging() {}
  endDrag() {}
}

class Target {
  ...

  canDrop() {}
  hover() {}
  drop() {}
}

// Define the DnD logic on the manager
const Item = 'item'
const src = new Source()
const dst = new Target()

const srcId = registry.addSource(Item, src)
const dstId = registry.addTarget(Item, dst)

// Link the DOM with the logic
const srcP = document.createElement('p')
const srcTxt = document.createTextNode('Source')
srcP.appendChild(srcTxt)
document.body.appendChild(srcP)
manager.getBackend().connectDragSource(srcId, srcP)

const dstP = document.createElement('p')
const dstTxt = document.createTextNode('Target')
dstP.appendChild(dstTxt)
document.body.appendChild(dstP)
manager.getBackend().connectDropTarget(dstId, dstP)
```

## Migrating

### Migrating from 6.x.x

Starting with `7.0.0`, `dnd-multi-backend` doesn't have a default export anymore.

Previously:
```js
import MultiBackend from 'dnd-multi-backend'
```

Now:
```js
import { MultiBackend } from 'dnd-multi-backend'
```

### Migrating from 5.0.x

Starting with `5.1.0`, every backend in a pipeline will now need a new property called `id` and the library will warn if it isn't specified. The `MultiBackend` will try to guess it if possible, but that might fail and you will need to define them explicitly.

## License

MIT, Copyright (c) 2016-2022 Louis Brunner



[npm-image]: https://img.shields.io/npm/v/dnd-multi-backend.svg
[npm-url]: https://npmjs.org/package/dnd-multi-backend
[deps-image]: https://david-dm.org/louisbrunner/dnd-multi-backend/status.svg
[deps-url]: https://david-dm.org/louisbrunner/dnd-multi-backend
[deps-dev-image]: https://david-dm.org/louisbrunner/dnd-multi-backend/dev-status.svg
[deps-dev-url]: https://david-dm.org/louisbrunner/dnd-multi-backend?type=dev

---
_Source: https://npm.io/package/dnd-multi-backend · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._