vue实现div拖拽互换位置

实现div拖拽互换位置可以使用Vue的拖拽指令`v-drag`，具体实现步骤如下：

1. 在Vue组件中引入`v-drag`指令。

import vDrag from 'v-drag';

2. 在Vue组件中注册`v-drag`指令。

export default {
  directives: { vDrag },
  // ...
}

3. 在模板中使用`v-drag`指令，并绑定相应的事件。

<template>
  <div v-drag class="drag-item" @dragstart="handleDragStart" @dragend="handleDragEnd">
    Drag me!
  </div>
</template>

4. 在事件处理方法中获取相应的拖拽数据，并实现拖拽效果。

export default {
  // ...
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text', event.target.id);
      event.target.classList.add('dragging');
    },
    handleDragEnd(event) {
      event.target.classList.remove('dragging');
    },
  },
  // ...
}

5. 实现拖拽交换位置的功能。通过监听`dragover`事件，获取当前被拖拽元素和目标元素的位置信息，并进行位置交换。

export default {
  // ...
  methods: {
    // ...
    handleDragOver(event) {
      event.preventDefault();

      const draggingEle = document.querySelector('.dragging');
      const dropzone = event.target.closest('.dropzone');

      if (!dropzone || dropzone === draggingEle) {
        return;
      }

      const draggingRect = draggingEle.getBoundingClientRect();
      const dropzoneRect = dropzone.getBoundingClientRect();

      if (event.clientY > (dropzoneRect.top + dropzoneRect.height / 2)) {
        dropzone.parentNode.insertBefore(draggingEle, dropzone.nextElementSibling);
      } else {
        dropzone.parentNode.insertBefore(draggingEle, dropzone);
      }
    },
  },
  // ...
}

完整代码示例：

<template>
  <div>
    <div class="dropzone" @dragover="handleDragOver">
      <div v-drag class="drag-item" @dragstart="handleDragStart" @dragend="handleDragEnd">
        Drag me!
      </div>
      <div v-drag class="drag-item" @dragstart="handleDragStart" @dragend="handleDragEnd">
        Drag me too!
      </div>
    </div>
  </div>
</template>

<script>
import vDrag from 'v-drag';

export default {
  directives: { vDrag },
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text', event.target.id);
      event.target.classList.add('dragging');
    },
    handleDragEnd(event) {
      event.target.classList.remove('dragging');
    },
    handleDragOver(event) {
      event.preventDefault();

      const draggingEle = document.querySelector('.dragging');
      const dropzone = event.target.closest('.dropzone');

      if (!dropzone || dropzone === draggingEle) {
        return;
      }

      const draggingRect = draggingEle.getBoundingClientRect();
      const dropzoneRect = dropzone.getBoundingClientRect();

      if (event.clientY > (dropzoneRect.top + dropzoneRect.height / 2)) {
        dropzone.parentNode.insertBefore(draggingEle, dropzone.nextElementSibling);
      } else {
        dropzone.parentNode.insertBefore(draggingEle, dropzone);
      }
    },
  },
};
</script>

<style scoped>
.drag-item {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

.dragging {
  opacity: 0.5;
}

.dropzone {
  display: flex;
  flex-wrap: wrap;
  border: 2px dashed #aaa;
  padding: 10px;
}
</style>