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.

Installation

npm install 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: [
    {
      backend: HTML5Backend,
      transition: MouseTransition,
    },
    {
      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);

License

MIT, Copyright (c) 2016-2019 Louis Brunner