<script>
import Moveable from "vue3-moveable";
import { ref } from "vue";

export default {
    components: { Moveable },
    setup() {
        const groupInstances = ref([]);
        const t1 = ref(null);
        const t2 = ref(null);
        const groupMoveable = ref(null);
        const initGroupElements = function initGroupElements() {
            const arr = [];
            arr.push(document.getElementsByClassName("target1")[0]);
            arr.push(document.getElementsByClassName("target2")[0]);
            groupInstances.value = arr;
        };
        const handleDragStart = function handleDragStart(e) {
            initGroupElements();
            groupMoveable.value.dragStart(e.inputEvent);
        };
        const onDragGroup = (e) => {
            e.events.forEach((ev) => (ev.target.style.transform = ev.transform));
            t1.value.updateRect();
            t2.value.updateRect();
        };
        const onDragGroupEnd = () => {
            groupInstances.value = [];
        };
        return {
            t1,
            handleDragStart,
            t2,
            groupMoveable,
            groupInstances,
            onDragGroup,
            onDragGroupEnd
        };
    }
};
</script>
<template>
    <div class="root">
        <div class="container">
            <div :class="`target target1`">Target 1</div>
            <div :class="`target target2`">Target 2</div>
            <Moveable
                ref="t1"
                :target="`.target1`"
                :draggable="true"
                :edgeDraggable="true"
                :origin="false"
                @dragStart="handleDragStart"/>
            <Moveable
                ref="t2"
                :target="`.target2`"
                :draggable="true"
                :origin="false"
                :edgeDraggable="true"
                @dragStart="handleDragStart"/>
            <Moveable
                ref="groupMoveable"
                :target="groupInstances"
                :hideDefaultLines="false"
                :draggable="true"
                @dragGroup="onDragGroup"
                @dragGroupEnd="onDragGroupEnd"/>
        </div>
    </div>
</template>