以一个十字分割列表，拖动左侧列表时候，右侧列表对应反方向移动 反之拖动右侧列表，左侧列表页反方向移动

要实现这种效果，你可以使用Vue.js中的`v-model`和`v-on`指令，以及一些JavaScript处理拖拽事件。这里提供一个简单的例子，我们将使用两个虚拟滚动列表（例如`v-list`）来模仿实际列表，并用`draggable`库进行拖放交互。首先安装`vue-draggable-resizable`库：

npm install vue-draggable-resizable

然后在Vue组件中引入并使用这个库：

<template>
  <div class="container">
    <draggable :list="leftList" :options="{ group: 'group', draggable: true, revert: 'invalid' }" v-model="selectedLeftItem" @start="dragStart($event)" @end="dragEnd($event)">
      <div v-for="(item, index) in leftList" :key="index" :class="{ active: item === selectedLeftItem }">{{ item }}</div>
    </draggable>
    <draggable-resizable :items="rightList" :options="{ group: 'group', drag: 'reverse', resize: false }" @resize="handleResize" :model.sync="selectedRightItem" />
  </div>
</template>

<script>
import draggable from "vue-draggable-resizable";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      leftList: ["Item 1", "Item 2", "Item 3"],
      rightList: ["Item A", "Item B", "Item C"],
      selectedLeftItem: null,
      selectedRightItem: null,
    };
  },
  methods: {
    dragStart(event) {
      this.selectedLeftItem = event.item;
    },
    dragEnd(event) {
      // 根据当前选中的左侧项目更新右侧项目的位置
      this.rightList = this.rightList.map((item, index) => (this.selectedLeftItem === item ? this.leftList[this.leftList.indexOf(item)].toString() : item));
    },
    handleResize() {
      // 当右侧列表大小变化时，可能需要重新调整左侧列表，这里仅做示例，根据具体需求调整
      console.log("Resizing right list");
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  gap: 10px;
}
.draggable {
  cursor: move;
  user-select: none;
}
</style>

在这个例子中：

- `draggable`属性用于创建可拖动的左侧列表项，`v-model`绑定到`selectedLeftItem`，当开始拖动时调用`dragStart`方法，结束时调用`dragEnd`方法改变右侧列表。
- `draggable-resizable`用于创建右侧列表，`@resize`事件触发`handleResize`方法，但在此示例中并没有实际处理缩放。
- `group`选项确保左右两个列表在同一个拖放组中，互相影响。

当你运行此代码后，左侧列表的拖动会联动右侧列表，反之亦然。