当前位置：首页 > article >正文

基于 Vue.js 和 Element UI 实现九宫格按钮拖拽排序功能 | 详细教程与代码实现

article 2025/2/26 2:40:00

在Vue.js项目中使用vue-element-template（基于Element UI）实现按钮的九宫格拖拽排序功能，可以通过以下步骤实现。我们将使用vuedraggable库来实现拖拽排序功能。

1. 安装依赖

首先，确保你已经安装了vuedraggable库：

npm install vuedraggable

2. 创建组件

接下来，创建一个Vue组件来实现九宫格拖拽排序功能。

<template>
  <div class="grid-container">
    <draggable v-model="buttons" class="grid" :options="{ animation: 150 }">
      <div v-for="(button, index) in buttons" :key="index" class="grid-item">
        <el-button>{{ button.label }}</el-button>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      buttons: [
        { label: '按钮1' },
        { label: '按钮2' },
        { label: '按钮3' },
        { label: '按钮4' },
        { label: '按钮5' },
        { label: '按钮6' },
        { label: '按钮7' },
        { label: '按钮8' },
        { label: '按钮9' },
      ],
    };
  },
};
</script>

<style scoped>
.grid-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

3. 解释代码

draggable 组件: 这是vuedraggable库提供的组件，用于实现拖拽功能。v-model绑定到buttons数组，表示按钮的顺序。
buttons 数组: 这是一个包含按钮信息的数组，每个按钮有一个label属性，用于显示按钮的文本。
grid 布局: 使用CSS Grid布局来创建一个3x3的九宫格。grid-template-columns和grid-template-rows定义了网格的列和行的大小，gap定义了网格项之间的间距。

4. 运行项目

将上述代码添加到你的Vue组件中，然后运行项目。你应该会看到一个3x3的九宫格，每个格子里有一个按钮。你可以通过拖拽按钮来重新排列它们的位置。

5. 保存排序结果

如果你需要保存用户拖拽后的排序结果，可以在draggable组件的@end事件中处理：

<template>
  <div class="grid-container">
    <draggable v-model="buttons" class="grid" :options="{ animation: 150 }" @end="onDragEnd">
      <div v-for="(button, index) in buttons" :key="index" class="grid-item">
        <el-button>{{ button.label }}</el-button>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      buttons: [
        { label: '按钮1' },
        { label: '按钮2' },
        { label: '按钮3' },
        { label: '按钮4' },
        { label: '按钮5' },
        { label: '按钮6' },
        { label: '按钮7' },
        { label: '按钮8' },
        { label: '按钮9' },
      ],
    };
  },
  methods: {
    onDragEnd() {
      // 在这里处理拖拽结束后的逻辑，例如保存排序结果
      console.log('拖拽结束，当前顺序：', this.buttons);
    },
  },
};
</script>