<script>
import Moveable from "vue-moveable";
import "./snap.css";

export default {
    components: { Moveable },
    data() {
        const snapContainer = ".snapGrid";
        return { snapContainer };
    },
    methods: {
        onMoustEnter(e) {
            this.snapContainer = e.currentTarget;
        },
        onDragStart() {
            document.querySelectorAll(".snapGrid").forEach(grid => {
                grid.addEventListener("mouseenter", this.onMoustEnter);
            });
        },
        onDrag(e) {
            e.target.style.transform = e.transform;
            e.target.style.pointerEvents = "none";
        },
        onDragEnd(e) {
            e.target.style.pointerEvents = "";
            document.querySelectorAll(".snapGrid").forEach(grid => {
                grid.removeEventListener("mouseenter", this.onMoustEnter);
            });
        }
    }
};
</script>
<template>
    <div
        class="root"
        style="position: relative;border: 1px solid black;"
    >
        <Moveable
            :target="'.target'"
            :draggable="true"
            :snappable="true"
            :horizontalGuidelines="[0, 100, 200, 300]"
            :verticalGuidelines="[0, 100, 200, 300]"
            :snapContainer="snapContainer"
            @dragStart="onDragStart"
            @drag="onDrag"
            @dragEnd="onDragEnd"/>
        <div class="container">
            <div class="snapGrid">
                <div
                    class="target"
                    style="width: 200px;height: 150px;transform: translate(0px, 0px) scale(1.5, 1);"
                >Target</div>
            </div>
            <div class="snapGrid"></div>
        </div>
    </div>
</template>