<script>
import Moveable from "vue-moveable";

export default {
    components: { Moveable },
    data() {
        return {};
    },
    methods: {
        onDrag(e) {
            e.target.style.cssText += `transform: ${e.transform}`;
        },
        onResize(e) {
            e.target.style.cssText += `width: ${e.boundingWidth}px;` + `height: ${e.boundingHeight}px;` + `transform: ${e.drag.transform}`;
        },
        onScale(e) {
            e.target.style.cssText += `transform: ${e.drag.transform}`;
        }
    }
};
</script>
<template>
    <div class="container">
        <div class="target">Target1</div>
        <Moveable
            :target="'.target'"
            :keepRatio="true"
            :triggerAblesSimultaneously="true"
            :resizable="({ edge: ['e', 'w'], renderDirections: ['e', 'w'] })"
            :scalable="({ edge: [], renderDirections: ['nw', 'ne', 'se', 'sw'] })"
            :draggable="true"
            :edgeDraggable="['n', 's']"
            @drag="onDrag"
            @resize="onResize"
            @scale="onScale"/>
    </div>
</template>