vue-react-dnd
Version:
Vue Drag and Drop Library based on react-dnd
271 lines (198 loc) • 6.31 kB
Markdown
Vue Drag and Drop Library based on [react-dnd](https://github.com/react-dnd/react-dnd).
vue-react-dnd has no dependency to React itself, since it only uses
`dnd-core` as dependency.
```
npm install --save vue-react-dnd
npm install --save react-dnd-html5-backend
```
Make sure you are familiar with react-dnd concepts. An overview of all
the concepts can be found here:
<http://react-dnd.github.io/react-dnd/docs-overview.html>
To make a vue component draggable you need to add the `DragSource`
mixin, define the `dragSource` configuration and add the `v-dragSource`
directive to the HTML.
```html
<!--
Use the v-dragSource directive on the element you want to drag.
The directive can anywhere in the HTML and must not be the root element
-->
<div v-dragSource v-bind:class="{dragging: isDragging}">Drag me</div>
```
```javascript
// 1. Import DragSource Mixin
import { DragSource } from 'vue-react-dnd'
new Vue({
// ...
// 2. Add DragSource Mixin to Component
mixins: [DragSource],
data () {
return {
isDragging: false
}
},
// 3. Definine type function, specs object and collect function
dragSource: {
// Required. Returns either a string, an ES6 symbol.
// Only the drop targets registered for the same type will react to the
// items produced by this drag source.
// Read the react-dnd documentation to learn more about the items and types.
type () {
return ItemTypes.BOX
},
// Required. A plain JavaScript object with a few allowed methods on it.
// It describes how the drag source reacts to the drag and drop events.
// Read the react-dnd documentation to learn more about the drag source specification.
specs: {
beginDrag () {
return {
name: 'Drag me'
}
},
endDrag (monitor) {
const item = monitor.getItem()
const dropResult = monitor.getDropResult()
if (dropResult) {
alert('You dropped me!')
}
}
},
// Optional. The collecting function receives two parameters: connect and monitor.
// It can update a components internal state.
// Read the react-dnd documentation an introduction to the monitors, the connectors.
collect (connect, monitor) {
this.isDragging = monitor.isDragging()
}
}
// ...
})
```
To make a vue component a drop traget you need to add the `DropTarget`
mixin, define the `dropTarget` configuration and add a `v-dropTarget`
directive to the HTML.
```html
<!--
Use the v-dropTarget directive on the element you want to have a drop traget.
The directive can be anywhere in the HTML and must not be the root element
-->
<div v-dropTarget v-bind:class="{active: isActive, canDrop: !isActive && canDrop }">
Drag a box here
</div>
```
```javascript
// 1. Import DropTarget Mixin
import { DropTarget } from 'vue-react-dnd'
new Vue({
// ...
// 2. Add DropTarget Mixin to Component
mixins: [DropTarget],
data () {
return {
isOver: false,
canDrop: false
}
},
computed: {
isActive () {
return this.canDrop && this.isOver
}
},
// 2. Definine type function, specs object and collect function
dropTarget: {
// Required. Returns a string, an ES6 symbol, an array of either.
// This drop target will only react to the items produced by the drag sources
// of the specified type or types.
// Read the react-dnd documentation to learn more about the items and types.
type () {
return ItemsTypes.BOX
},
// Required. A plain JavaScript object with a few allowed methods on it.
// It describes how the drop target reacts to the drag and drop events.
// See the react-dnd documentaion where the drop target specification is
// described in detail.
specs: {
drop () {
return { name: 'Dustbin' }
}
},
// Optional. The collecting function receives two parameters: connect and monitor.
// It can update a components internal state.
// Read the react-dnd documentation an introduction to the monitors, the connectors.
collect (connect, monitor) {
this.isOver = monitor.isOver()
this.canDrop = monitor.canDrop()
}
}
// ...
})
```
see: `docs/examples/DragAround/CustomDragLayer/CustomDragLayer.vue`
Use the `DragDropContext` mixin to add a Drag and Drop Backend to your
application.
```html
<MyApp />
```
```javascript
import { DragDropContext } from 'vue-react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
new Vue({
// ...
mixins: [DragDropContext(HTML5Backend)]
// ...
})
```
As alternative to the `DragDropContext` use the
`DragDropContextProvider` component to add a Drag and Drop Backend to
your application.
```html
<DragDropContextProvider v-bind:backend="html5Backend">
<MyApp />
</DragDropContextProvider>
```
```javascript
import { DragDropContextProvider } from 'vue-react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
new Vue({
// ...
components: {
DragDropContextProvider
},
data () {
return {
html5Backend: HTML5Backend
}
}
// ...
})
```
The specs functions in `vue-react-dnd` do not have the `props`
parameter, since all values of the component can be directly accessed
using `this`.
In `react-dnd` the collect function always has to return a plain
JavaScript Object that updates the internal state. In `vue-react-dnd`
the internal state can be set directly using `this`. Therefore the
collect function is optional in `vue-react-dnd`.
Examples can be found in the `docs/examples` directory. Most of the
examples are reimplementations of the examples provided by
react-dnd. A live version of the examples can be found here:
<https://jenshaase.github.io/vue-react-dnd>
Run examples: `npm run dev`
Lint code: `npm run lint`
Publish documentation to gh-pages: `npm run publish:doc`
1. `npm run publish:doc`
2. `npm run build:lib`
3. `npm version <newversion>`
4. `npm publish`