vue 使用pointerdown pointerup 实现拖拽互换

好的，根据您提供的信息，您可以使用 Vue.js 和 Pointer Events API 来实现拖拽互换功能。以下是一个简单的示例代码：

HTML：

<div id="app">
  <div
    v-for="(item, index) in items"
    :key="item.id"
    :style="{top: item.top + 'px', left: item.left + 'px'}"
    @pointerdown="onPointerDown(index, $event)"
    @pointerup="onPointerUp(index, $event)"
    class="item"
  >
    {{ item.text }}
  </div>
</div>

CSS：

.item {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border: 1px solid #000;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  cursor: pointer;
}

JavaScript：

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, text: 'Item 1', top: 0, left: 0 },
      { id: 2, text: 'Item 2', top: 0, left: 120 },
      { id: 3, text: 'Item 3', top: 0, left: 240 },
      { id: 4, text: 'Item 4', top: 0, left: 360 }
    ],
    draggingIndex: -1,
    draggingStyle: {
      top: 0,
      left: 0,
      display: 'none'
    }
  },
  methods: {
    onPointerDown(index, event) {
      this.draggingIndex = index;
      this.draggingStyle.display = 'block';
      this.draggingStyle.top = event.clientY + 'px';
      this.draggingStyle.left = event.clientX + 'px';
    },
    onPointerUp(index, event) {
      if (this.draggingIndex !== -1 && this.draggingIndex !== index) {
        const tmp = this.items[index];
        this.items[index] = this.items[this.draggingIndex];
        this.items[this.draggingIndex] = tmp;
      }
      this.draggingIndex = -1;
      this.draggingStyle.display = 'none';
    },
    onPointerMove(event) {
      if (this.draggingIndex !== -1) {
        this.draggingStyle.top = event.clientY + 'px';
        this.draggingStyle.left = event.clientX + 'px';
      }
    }
  },
  computed: {
    draggingItem() {
      return this.items[this.draggingIndex] || {};
    }
  },
  created() {
    document.addEventListener('pointermove', this.onPointerMove);
  },
  destroyed() {
    document.removeEventListener('pointermove', this.onPointerMove);
  }
});

这个示例代码实现了一个包含四个可拖拽的方块的列表，当鼠标按下时，会触发 `onPointerDown` 方法，记录当前拖拽的方块索引和位置，并且显示一个半透明的拖拽方块。当鼠标抬起时，会触发 `onPointerUp` 方法，如果当前鼠标所在的方块不是当前拖拽的方块，那么就交换它们的位置。在整个过程中，使用了 `onPointerMove` 方法监听鼠标移动事件，不断更新拖拽方块的位置。最后，使用 `computed` 属性和 `draggingIndex` 来动态计算当前拖拽的方块的数据对象。

希望这个示例代码可以帮助您完成您的需求。如果您有任何疑问，请随时问我。