dnd-multi-backend

What is dnd-multi-backend?

The dnd-multi-backend package is a flexible and powerful library for handling drag-and-drop interactions in React applications. It allows developers to use multiple backends (such as HTML5 and touch) to provide a seamless drag-and-drop experience across different devices and environments.

What are dnd-multi-backend's main functionalities?

Multi-backend support

This feature allows you to use multiple drag-and-drop backends in a single application. The code sample demonstrates how to set up the DndProvider with the MultiBackend and configure it to use both HTML5 and touch backends.

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { TouchBackend } from 'react-dnd-touch-backend';
import MultiBackend from 'dnd-multi-backend';
import { HTML5toTouch } from 'dnd-multi-backend/lib/HTML5toTouch';

const App = () => (
  <DndProvider backend={MultiBackend} options={HTML5toTouch}>
    {/* Your drag-and-drop components go here */}
  </DndProvider>
);

Custom backend configuration

This feature allows you to customize the configuration of the backends used in your application. The code sample shows how to create a custom transition and configure the HTML5 and touch backends with specific options.

import { DndProvider } from 'react-dnd';
import MultiBackend, { createTransition } from 'dnd-multi-backend';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { TouchBackend } from 'react-dnd-touch-backend';

const HTML5toTouch = {
  backends: [
    {
      backend: HTML5Backend,
      transition: createTransition('touchstart', (event) => event.touches != null)
    },
    {
      backend: TouchBackend,
      options: { enableMouseEvents: true },
      preview: true
    }
  ]
};

const App = () => (
  <DndProvider backend={MultiBackend} options={HTML5toTouch}>
    {/* Your drag-and-drop components go here */}
  </DndProvider>
);

Other packages similar to dnd-multi-backend

react-dnd

react-dnd is a popular library for creating complex drag-and-drop interfaces in React. It provides a flexible API for defining drag sources and drop targets, and supports multiple backends. However, it does not natively support multiple backends in a single application like dnd-multi-backend does.

react-beautiful-dnd

react-beautiful-dnd is a library focused on creating beautiful and accessible drag-and-drop experiences in React. It provides a higher-level API compared to react-dnd and is easier to use for common drag-and-drop use cases. However, it does not support multiple backends and is less flexible than dnd-multi-backend.

react-dragula

react-dragula is a React wrapper for the Dragula library, which provides a simple API for drag-and-drop interactions. It is easy to set up and use, but it lacks the advanced features and flexibility of dnd-multi-backend, such as support for multiple backends and custom backend configurations.

README

DnD Multi Backend

Try it here!

This project is a Drag'n'Drop backend compatible with 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 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 for instructions when switching from 5.0.x or 6.x.x.

Installation

npm install -S dnd-multi-backend

Usage & Example

You should only use this package if your framework is not in the supported list:

• React
• Angular

In this case, you will need to write a custom pipeline including as many dnd-core backends as you wish. See also the examples for more information.

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:

import MultiBackend from 'dnd-multi-backend'

Now:

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