vue 两个元素拖动，互相影响位置

Vue 中实现两个元素拖动并互相影响位置，通常会涉及到拖拽库如 Vue-Draggable 或者 Vanilla JavaScript 的 drag&drop API，以及一些计算和事件处理技术。以下是一个简单的步骤说明：

1. **安装库**：首先安装相应的拖拽库，例如 `vue-draggable`，通过 npm 安装：

   npm install vue-draggable

2. **组件绑定**：在需要拖拽的 Vue 组件中，使用 `v-draggable` 或者自定义的 draggable 函数，并设置 `bind` 和 `update` 事件监听器来跟踪元素的位置变化。

<template>
  <div v-for="(item, index) in items" :key="index">
    <draggable :model="item" :move="handleDrag">
      <span>{{ item.name }}</span>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vue-draggable';

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { name: 'Element 1', position: { x: 0, y: 0 } },
        { name: 'Element 2', position: { x: 50, y: 50 } }
      ]
    };
  },
  methods: {
    handleDrag({ model, el, event }) {
      // 当元素被移动时，更新模型和相应元素的位置
      model.position = {
        x: event.pageX - el.offsetLeft,
        y: event.pageY - el.offsetTop
      };

      // 如果你想让这两个元素相互影响位置，可以在这里添加计算逻辑
      if (model === this.items[1]) {
        this.items[0].position.x += model.position.x;
        this.items[0].position.y += model.position.y;
      }
    }
  }
};
</script>

在这个例子中，当第一个元素被拖动时，它的位置会影响第二个元素的位置。如果你想要更复杂的交互，比如限制元素之间的距离、碰撞检测等，可能需要进一步定制逻辑或引入第三方库。