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

export default {
    components: { Moveable },
    data() {
        return {};
    },
    methods: { onDrag(e) {
        e.target.style.transform = e.transform;
    } }
};
</script>
<template>
    <div class="container">
        <svg
            viewBox="0 0 200 200"
            style="border: 1px solid black;width: 200px;height: 200px;"
        >
            <svg
                viewBox="0 0 200 200"
                style="border: 1px solid black;width: 200px;height: 200px;"
            >
                <path
                    d="M 0 0 L 200 0 L 200 200 z"
                    class="svg"
                    style="fill: white;stroke: red;stroke-width: 2;"/>
            </svg>
        </svg>
        <Moveable
            :target="'.svg'"
            :draggable="true"
            :preventClickDefault="true"
            @drag="onDrag"/>
    </div>
</template>