0.3.2 • Published 4 years ago
v-movable v0.3.2
v-movable
A vue component or component wrapper that makes an element movable and its movements can be customized.
Installation
npm i --save v-movable
Initialize in main.js
import movable from "v-movable";
Vue.use(movable);
Options (element attributes)
- 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
Events (prefer over attrib handlers above)
- @start: fires immediately after the pointerdown event on the element
- @move: fires continuously while moving
- @complete: fires after the pointerup event on the element
Usage
<template>
<div style="position:relative; margin:50px;">
<div class="testmove" ref="parentEl">
<movable class="modaltitle" target="parentEl">modal behavior</movable>`
<span>not movable</span>
</div>
<movable class="testmove" posTop="444" :grid="20"><span>grid:20</span></movable>
<movable class="testmove" posTop="222" posLeft="222" shiftKey="true"><span>Shift Key Behavior</span></movable>
<movable class="testmove" posLeft="444" :bounds="{x:[0,0]}"><span>bounds:only y</span></movable>
<movable class="testmove" posTop="444" posLeft="444" :bounds="{y:[0,0]}"><span>bounds:only x</span></movable>
</div>
</template>
<style>
.testmove {
display:block;
position: absolute;
top: 0;
height: 150px;
width: 150px;
margin: 200px;
background: #333;
color: white;
}
.modaltitle {
background: blue;
display:block;
width:100%;
color: white;
}
</style>
0.3.2
4 years ago
1.0.0-beta.8
4 years ago
1.0.0-beta.7
4 years ago
1.0.0-beta.4
4 years ago
1.0.0-beta.5
4 years ago
1.0.0-beta.6
4 years ago
1.0.0-beta.3
4 years ago
0.3.1
4 years ago
0.3.0
4 years ago
0.2.11
5 years ago
0.2.10
5 years ago
0.2.9
5 years ago
0.2.8
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
1.0.0-beta.2
5 years ago
0.2.4
5 years ago
1.0.0-beta.1
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
1.0.0-beta.0
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago