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

export default {
    components: { Moveable },
    setup() {
        const onDrag = e => {
            e.target.style.cssText += `transform: ${e.transform}`;
        };
        const onResize = e => {
            e.target.style.cssText += `width: ${e.boundingWidth}px;` + `height: ${e.boundingHeight}px;` + `transform: ${e.drag.transform}`;
        };
        const onScale = e => {
            e.target.style.cssText += `transform: ${e.drag.transform}`;
        };
        return { onDrag, onResize, onScale };
    }
};
</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>