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

export default {
    components: { Moveable },
    setup() {
        const moveableRef = ref(null);
        const target = ref(null);
        const onDragStart = e => {
            const nativeEvent = e.nativeEvent;
            if (!target.value) {
                moveableRef.value.waitToChangeTarget().then(() => {
                    moveableRef.value.dragStart(nativeEvent);
                });
                target.value = document.querySelector("#drag1");
            }
        };
        const onDrag = e => {
            e.target.style.cssText += e.cssText;
        };
        return { onDragStart, moveableRef, target, onDrag };
    }
};
</script>
<template>
    <div class="container">
        <div style="width: 500px;height: 500px;border: 1px solid black;"></div>
        <img
            id="drag1"
            src="https://www.w3schools.com/html/img_w3slogo.gif"
            draggable="true"
            @dragStart="onDragStart"/>
        <Moveable
            ref="moveableRef"
            :target="target"
            :dragContainer="'.container'"
            :draggable="true"
            :preventDefault="false"
            @drag="onDrag"/>
    </div>
</template>