useDraggable

{ "x": 0, "y": 0 }

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';
import { useInteractContext, useDraggable } from 'vue-interact';

const interactableTarget = ref(null);

const context = useInteractContext(interactableTarget);
const { init, position } = useDraggable(context);

onMounted(() => {
  nextTick(() => {
    init();
  });
});

const reset = () => {
  position.value.x = 0;
  position.value.y = 0;
}
</script>

<template>
  <div class="container">
    {{ position }}
    <div ref="interactableTarget" style="width: 100px; height: 100px; background-color: #29e;">
    </div>

    <button class="reset-btn" @click="reset">Reset</button>
  </div>