<script>
import Moveable from "vue-moveable";

export default {
    components: { Moveable },
    data() {
        const moveableRef = null;
        const target = null;
        return { moveableRef, target };
    },
    methods: {
        onDragStart(e) {
            const nativeEvent = e.nativeEvent;
            if (!this.target) {
                this.$refs.moveableRef.waitToChangeTarget().then(() => {
                    this.$refs.moveableRef.dragStart(nativeEvent);
                });
                this.target = document.querySelector("#drag1");
            }
        },
        onDrag(e) {
            e.target.style.cssText += e.cssText;
        }
    },
    mounted() {
        this.moveableRef = this.$refs.moveableRef;
    }
};
</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>