Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
dnd-multi-backend
Advanced tools
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
.
npm install -S dnd-multi-backend
You should only use this package if your framework is not in the supported list:
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)
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'
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.
MIT, Copyright (c) 2016-2021 Louis Brunner
FAQs
Multi Backend system compatible with DnD Core / React DnD
The npm package dnd-multi-backend receives a total of 64,961 weekly downloads. As such, dnd-multi-backend popularity was classified as popular.
We found that dnd-multi-backend demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.