vue使用指令实现元素拖动并获取元素拖拽结束后相对于父元素的坐标

要实现元素拖拽，可以使用Vue的指令v-draggable，它是一个轻量级的指令，可以让元素在父元素中拖拽。首先，你需要在Vue的实例中注册指令v-draggable，如下所示：

Vue.directive('draggable', {
  bind: function (el, binding, vnode) {
    el.style.position = 'absolute';
    let startX, startY, initialMouseX, initialMouseY;
    el.addEventListener('mousedown', function (e) {
      startX = el.offsetLeft;
      startY = el.offsetTop;
      initialMouseX = e.clientX;
      initialMouseY = e.clientY;
      el.addEventListener('mousemove', drag);
      el.addEventListener('mouseup', stopDrag);
    });

    function drag(e) {
      el.style.left = startX + e.clientX - initialMouseX + 'px';
      el.style.top = startY + e.clientY - initialMouseY + 'px';
    }

    function stopDrag() {
      el.removeEventListener('mousemove', drag);
      el.removeEventListener('mouseup', stopDrag);
      let pos = {
        left: el.offsetLeft,
        top: el.offsetTop
      };
      binding.value(pos);
    }
  }
});

然后，在你要应用指令的元素上使用v-draggable指令，并传递一个回调函数，它会在拖拽结束时被调用，如下所示：

<template>
  <div>
    <div v-draggable="onDragEnd">Drag me!</div>
  </div>
</template>

<script>
export default {
  methods: {
    onDragEnd(pos) {
      console.log(`Position: ${pos.left}, ${pos.top}`);
    }
  }
}
</script>

在回调函数中，你可以获取到元素拖拽结束时相对于父元素的坐标，然后你可以在回调函数中对这些坐标进行处理，或者将它们发送到服务器进行处理。