<script>
import Moveable from "vue3-moveable";
import "./snap.css";
import { ref } from "vue";

export default {
    components: { Moveable },
    setup() {
        const snapContainer = ref(".snapGrid");
        const onMoustEnter = (e) => {
            snapContainer.value = e.currentTarget;
        };
        const onDragStart = () => {
            document.querySelectorAll(".snapGrid").forEach(grid => {
                grid.addEventListener("mouseenter", onMoustEnter);
            });
        };
        const onDrag = e => {
            e.target.style.transform = e.transform;
            e.target.style.pointerEvents = "none";
        };
        const onDragEnd = e => {
            e.target.style.pointerEvents = "";
            document.querySelectorAll(".snapGrid").forEach(grid => {
                grid.removeEventListener("mouseenter", onMoustEnter);
            });
        };
        return { snapContainer, onDragStart, onDrag, onDragEnd };
    }
};
</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>