使用Vue原生拖拽实现酷炫排序，简单好上手！

2024-02-18 13:31:04

使用Vue.js实现酷炫拖拽排序：简单、原生

在日常Web开发中，列表拖拽排序功能不可或缺，它允许用户通过拖动列表项轻松地重新排序。为了实现这一功能，开发者通常会求助于第三方JavaScript库，如Sortable.js和Vue.Draggable。然而，如果你热衷于深入了解拖拽排序的底层原理，不妨考虑使用Vue.js原生拖拽事件和transition-group。

Vue.js原生拖拽排序之旅

踏上Vue.js原生拖拽排序之旅，我们需遵循以下步骤：

列表项遍历： 使用v-for指令遍历你的列表数据，为每个列表项生成HTML。
拖拽监听： 为每个列表项添加v-on:dragstart事件监听器，它将在用户开始拖动列表项时触发。
被拖动项追踪： 在v-on:dragstart事件监听器中，设置一个数据属性来追踪当前被拖动的列表项。
重叠检测： 为每个列表项添加v-on:dragover事件监听器。当用户将列表项拖动到另一个列表项上时，此监听器将被触发。在监听器中，检查当前被拖动的列表项是否与另一个列表项重叠。
位置交换： 如果重叠，交换这两个列表项的位置。
拖拽结束： 为每个列表项添加v-on:dragend事件监听器，它将在用户停止拖动列表项时触发。
数据重置： 在v-on:dragend事件监听器中，将当前被拖动的列表项的数据属性重置为null。

示例代码一览

以下代码示例演示了如何使用Vue.js的原生拖拽事件和transition-group实现拖拽排序：

<template>
  <ul>
    <li
      v-for="item in items"
      :key="item.id"
      @dragstart="onDragStart(item)"
      @dragover="onDragOver(item)"
      @dragend="onDragEnd"
      draggable="true"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      draggedItem: null,
    }
  },
  methods: {
    onDragStart(item) {
      this.draggedItem = item;
    },
    onDragOver(item) {
      if (this.draggedItem && this.draggedItem !== item) {
        const index1 = this.items.indexOf(this.draggedItem);
        const index2 = this.items.indexOf(item);
        this.items.splice(index1, 1);
        this.items.splice(index2, 0, this.draggedItem);
      }
    },
    onDragEnd() {
      this.draggedItem = null;
    },
  },
};
</script>