vuejs drag-n-drop library
npm install vue-drag-it-dudeVue2 component, that allows you to drag object wherever you want
* Drag and drop DOM elements inside parent (or document, if parent's size not specified)
* Receive content sizes and update move restrictions
* Move with mouse, or with touch, it's not matter
* Emit active and drag events
via NPM
``bash`
npm install vue-drag-it-dude --save
`js
import DragItDude from 'vue-drag-it-dude';
export default {
name: 'App',
components: {
DragItDude
},
}
`
or
`js
import Vue from 'vue'
import DragItDude from 'vue-drag-it-dude'
Vue.component('vue-drag-it-dude', DragItDude)
`
Don't forget to add position: relative; for parent element!
#### Now use it!
`vue
@dragging="handleDragging"
@dropped="handleDropped"
>
{{ text }}
`
##### width
type:
Required: false
Default: 0
If you want to dynamically change inner DOM element width, just type something like:
`vue`
##### height
type:
Required: false
Default: 0
If you want to dynamically change inner DOM element height, just type something like:
`vue`
##### parentWidth
type:
Required: false
Default: of draggable element
If you want to limit width of area, within which an element can move:
`vue`
##### parentHeight
type:
Required: false
Default: of draggable element
If you want to limit height of area, within which an element can move:
`vue`
Required: falseCalled, when element is activated
vue
`#####
Required: falseCalled, when element is draggeing
vue
`#####
Required: falseCalled, when element release
vue
`How to run it locally
1. Clone repository:
2. Install cli-service-global: Vue CLI 3 docs
3. Run any vue file with hot reload and static server: vue serve docs-src/App.vue`