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 }}
`
##### widthNumber
type:
Required: false
Default: 0
If you want to dynamically change inner DOM element width, just type something like:
`vue`
##### heightNumber
type:
Required: false
Default: 0
If you want to dynamically change inner DOM element height, just type something like:
`vue`
##### parentWidthNumber
type: parentNode.offsetWidth
Required: false
Default: of draggable element
If you want to limit width of area, within which an element can move:
`vue`
##### parentHeightNumber
type: parentNode.offsetHeight
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
`#####
dragging
Required: falseCalled, when element is draggeing
`vue
`#####
dropped
Required: falseCalled, when element release
`vue
`How to run it locally
1. Clone repository:
git clone git@github.com:Esvalirion/vue-drag-it-dude.git
2. Install cli-service-global: npm install -g @vue/cli-service-global Vue CLI 3 docs
3. Run any vue file with hot reload and static server: vue serve docs-src/App.vue`