Package Exports
- vue-drag-resize-rotate
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-drag-resize-rotate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
a vue2 component. Taking a cue from react-resizable and react-draggable.
Install
npm install vue-drag-resize-rotateUsage
<template>
<div>
<vue-drr :w='180' :h='180' :r='0' :rotatable='false' v-on:change="showchange">
I can be dragged anywhere
</vue-drr>
<div style="height: 500px; width: 500px;float:left;position: relative;border: 1px solid black;padding:5px">
<vue-drr :w='180' :h='180' :bounds='{parent:true}' :rotatable='true'>
<div>I can only be moved in any parent.</div>
</vue-drr>
</div>
<!-- <vue-drr :w='180' :h='180' :r='30' :rotatable='true'>
rotated 30deg at the begaining
</vue-drr> -->
<vue-drr :w='180' :h='180' axis='x' :rotatable='true'>
I can only be dragged horizonally
</vue-drr>
<vue-drr :w='180' :h='180' axis='y' :rotatable='true'>
I can only be dragged vertically
</vue-drr>
<vue-drr :w='180' :h='180' handle='.dragme' :rotatable='true'>
<div class='dragme' style='background: #ccc;border: 1px solid black;padding:5px'>drag here</div>
<div>lalalalaala</div>
</vue-drr>
<vue-drr :w='180' :h='180' cancel='.dnotdragme' :rotatable='true'>
<div class='dnotdragme' style='background: #ccc;border: 1px solid black;padding:5px'>don't drag here</div>
<div>lalalalaala</div>
</vue-drr>
<vue-drr :w='180' :h='180' :grid='[50,50]' :rotatable='true'>
<div>snap to 50 * 50</div>
</vue-drr>
<vue-drr :w='180' :h='180' :bounds='{top: -100, left: -100, right: 100, bottom: 100}' :rotatable='true'>
<div>I can only be moved 100px in any direction.</div>
</vue-drr>
</div>
</template>
<style>
</style>
<script>
import VueDRR from 'vue-drag-resize-rotate'
export default {
name: 'app',
components: {
'vue-drr': VueDRR
},
methods: {
showchange: function (data) {
console.log(JSON.stringify(data))
}
}
}
</script>