1.0.0 • Published 5 years ago
vue-movable-element v1.0.0
vue-movable-element
vue component for giving HTML element ability to move.
- provide movable anchor
- nested move element
- provide move event
- moving within movable anchor boundaries
- no extra javascript framework dependency
Example
<template>
<movable-anchor style="margin-left: 50px;">
<movable style="background-color: red; width: 100px; height: 100px;">
<movable-anchor>
<movable style="background-color: #00a0ff; width: 25px; height: 25px;"></movable>
</movable-anchor>
</movable>
</movable-anchor>
</template>
API
MovableAnchor
provide anchor for movable component.
props
no props
events
resize which window have been resized.
Movable
props
- active, boolean, whether to active move ability.
- value, give initial position value, a number array (left, top) represent for left and top px from movable anchor top-left to moable element top-left.
- bounding, boolean, indicates that movable element can move out of the movable anchor's content.
events
input, array, emit current movable element left, top.
1.0.0
5 years ago