- 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