dnd-multi-backend

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