https://github.com/jenshaase/vue-react-dnd
Vue Drag and Drop Library based on react-dnd
https://github.com/jenshaase/vue-react-dnd
dnd drag-and-drop vue
Last synced: 6 months ago
JSON representation
Vue Drag and Drop Library based on react-dnd
- Host: GitHub
- URL: https://github.com/jenshaase/vue-react-dnd
- Owner: jenshaase
- License: mit
- Created: 2018-01-25T17:04:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-26T12:04:40.000Z (about 7 years ago)
- Last Synced: 2024-04-26T07:22:37.675Z (over 1 year ago)
- Topics: dnd, drag-and-drop, vue
- Language: JavaScript
- Homepage: https://jenshaase.github.io/vue-react-dnd
- Size: 702 KB
- Stars: 25
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-react-dnd
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.
## Install
```
npm install --save vue-react-dnd
npm install --save react-dnd-html5-backend
```
## Usage
Make sure you are familiar with react-dnd concepts. An overview of all
the concepts can be found here:
### DragSource
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
Drag me
```
```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()
}
}
// ...
})
```
### DropTarget
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
Drag a box here
```
```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()
}
}
// ...
})
```
### DragLayer
see: `docs/examples/DragAround/CustomDragLayer/CustomDragLayer.vue`
### DragDropContext
Use the `DragDropContext` mixin to add a Drag and Drop Backend to your
application.
```html
```
```javascript
import { DragDropContext } from 'vue-react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
new Vue({
// ...
mixins: [DragDropContext(HTML5Backend)]
// ...
})
```
### DragDropContextProvider
As alternative to the `DragDropContext` use the
`DragDropContextProvider` component to add a Drag and Drop Backend to
your application.
```html
```
```javascript
import { DragDropContextProvider } from 'vue-react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
new Vue({
// ...
components: {
DragDropContextProvider
},
data () {
return {
html5Backend: HTML5Backend
}
}
// ...
})
```
## Differences to react-dnd
### Specs function without `props` parameter
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`.
### Collect Function
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
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:
## Development
Run examples: `npm run dev`
Lint code: `npm run lint`
Publish documentation to gh-pages: `npm run publish:doc`
# Publish new version
1. `npm run publish:doc`
2. `npm run build:lib`
3. `npm version `
4. `npm publish`