v-movable  

A vue component or component wrapper that makes an element movable and its movements can be customized.

Live Demo

Installation

npm i --save v-movable

$3

import movable from "v-movable";
Vue.use(movable);

$3

- posTop/posLeft: initial coordinate
- target: _String (vue ref)_ - ref to element other than the component (e.g., wrap modal title in movable, and set target to the modal-body element ref)
- bounds: _{x:[min,max],y:[min,max]_}. Both x and y default to [-Infinity,Infinity]. Set to [min,max] ([0,0] to restrict the axis)
- vertical: _[min, max]_ - constrain movement to y axis within min and max provided. Shorthand for bounds="{x:[0,0],y:[min,max]}"
- horizontal: _[min, max]_ - constrain movement to x axis within min and max provided. Shorthand for bounds="{y:[0,0],x:[min,max]}"
- grid: _Int_ - defaults to 1. snap to grid size in pixels.
- shiftKey _Bool_ - any truthy value enables shift key to constrain movement to either x or y axis (whichever is greater). Setting any bounds option automatically disables shift key behavior.
- disabled: _Bool_ - disables moving

$3

- @start: fires immediately after the pointerdown event on the element
- @move: fires continuously while moving
- @complete: fires after the pointerup event on the element

$3

``html


```