Vue3中灵活玩转列表拖拽排序，给项目开发添姿增彩！

2022-12-02 05:35:06

使用 Vue 3 实现拖拽排序：让你的列表动起来！

在现代前端开发中，拖拽排序功能已成为必备功能之一，它赋予用户交互式界面，让他们能够轻松地调整项目顺序。凭借 Vue 3 的强大功能，实现拖拽排序变得更加容易，本教程将引导你完成这个过程。

利用 draggable 属性

Vue 3 的 draggable 属性为元素提供了拖拽能力，让它们响应鼠标或触摸输入。通过将 draggable 设置为 true，你可以在列表项或其他可拖动元素上应用此属性，从而启用拖拽操作。

以下是使用 draggable 属性的示例代码：

<template>
  <ul>
    <li v-for="item in items" :draggable="true" @dragstart="dragStart" @dragend="dragEnd">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    dragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.textContent);
    },
    dragEnd(event) {
      event.target.style.opacity = 1;
    }
  }
};
</script>

在这个示例中，我们使用 v-for 循环为 ul 列表创建了三个可拖动的 li 元素。当用户开始拖动 li 元素时，dragStart 事件监听器触发，并将被拖动元素的文本内容存储在 dataTransfer 对象中。拖拽结束时，dragEnd 事件监听器将触发，并重置被拖动元素的不透明度。

结合 Element Plus 和 sortable.js 实现表格拖拽排序

对于更复杂的场景，例如表格拖拽排序，你可以将 Vue 3 与 Element Plus 组件库和 sortable.js 插件相结合。Element Plus 提供了一个功能丰富的表格组件，而 sortable.js 则提供拖拽排序功能。

要实现表格拖拽排序，请按照以下步骤操作：

安装 sortable.js 插件：npm install sortablejs --save
导入 sortable.js 插件：import Sortable from 'sortablejs'
在 Vue 组件中初始化 Sortable 对象：

export default {
  mounted() {
    const table = this.$refs.table;
    Sortable.create(table, {
      // 拖拽排序选项
    });
  }
};

在上面的代码中，我们从 table 元素的引用创建了一个 Sortable 对象。你可以配置各种 Sortable 选项，例如允许跨行拖拽、显示占位符等。

示例代码

<template>
  <el-table ref="table" :data="tableData">
    <el-table-column prop="name"></el-table-column>
    <el-table-column prop="age"></el-table-column>
  </el-table>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Tom', age: 35 }
      ]
    };
  },
  mounted() {
    const table = this.$refs.table;
    Sortable.create(table, {
      ghostClass: 'sortable-ghost',
      animation: 150
    });
  }
};
</script>