- Vue.js :
2.x
- Browser: only work in Desktop browser,will consider Mobile browser in the future version
npm i vue-drag-plugin
you need to import plugin in your main.js
import Vue from 'vue'
import VueDragPlugin from "vue-drag-plugin"
Vue.use(VueDragPlugin)
set the css property width
and height
to limit the space that maybe be manipulated on ,for example:
<v-drag style="width:800px;height:200px;">
name | type | description |
---|---|---|
visible | required:boolean |
visibility of the drag shape |
drawEnable | optional:boolean |
whether or not you can draw a new shape with mouse in the blank,default:false |
selectWidth | optional:number |
width of the drag shape,default:0 |
selectHeight | optional:number |
width of the drag shape,default:0 |
offsetLeft | optional:number |
offset relative to the plugin 's X axis,default:0 |
offsetTop | optional:number |
offset relative to the plugin 's Y axis,default:0 |
name | params | description |
---|---|---|
onShapeDrag | the new size、position of shape | when shape has been draged |
onShapeResize | the new size、position of shape | when shape has been resized |
onShapeDraw | the new size、position of shape | when a new shape created |
you can checkout Demo here