<script>
import Moveable, { makeAble, MoveableManagerInterface } from "vue-moveable";

const MouseEnterLeaveAble = makeAble("enterLeave", {
    mouseEnter(moveable) {
        if (moveable.moveables) {
            moveable.moveables.forEach(child => {
                child.state.target.style.backgroundColor = "#e55";
            });
        } else {
            moveable.state.target.style.backgroundColor = "#e55";
        }
    },
    mouseLeave(moveable) {
        if (moveable.moveables) {
            moveable.moveables.forEach(child => {
                child.state.target.style.backgroundColor = "";
            });
        } else {
            moveable.state.target.style.backgroundColor = "";
        }
    }
});
export default {
    components: { Moveable },
    data() {
        const targetRef = null;
        return { targetRef };
    },
    methods: {
        onDrag(e) {
            e.target.style.transform = e.transform;
        },
        onDragGroup(e) {
            e.events.forEach(ev => {
                ev.target.style.transform = ev.transform;
            });
        }
    },
    mounted() {
        this.targetRef = this.$refs.targetRef;
    }
};
</script>
<template>
    <div class="container">
        <div class="target target1">Target1</div>
        <div class="target target2">Target2</div>
        <div
            class="target target3"
            ref="targetRef"
        >Target3</div>
        <Moveable
            :target="targetRef"
            :ables="[MouseEnterLeaveAble]"
            :origin="false"
            :props="({ enterLeave: true })"
            :draggable="true"
            @drag="onDrag"/>
        <Moveable
            :target="['.target1', '.target2']"
            :ables="[MouseEnterLeaveAble]"
            :origin="false"
            :props="({ enterLeave: true })"
            :draggable="true"
            @dragGroup="onDragGroup"/>
    </div>
</template>