怎么使用vue和Element-plus实现拖拽和排序功能

前言

Vue是一种流行的JavaScript框架，用于构建交互性的Web界面。Element Plus是一个基于Vue的UI组件库，提供丰富的功能和易用的界面元素。我们可以使用Vue和Element Plus来实现拖拽和排序功能，让用户可以自由地拖拽元素并改变它们的顺序。

实现拖拽排序功能的步骤

第一步：安装Vue和Element Plus

<script src="https://unpkg.com/vue@next" defer></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-plus/lib/index.full.js" defer></script>

第二步：创建Vue实例并引入Element Plus

<template id="app">
  <div id="drag-sort-demo">
    <el-row>
      <el-col :span="12">
        <div class="draggable-list">
          <el-card v-for="(item, index) in list" :key="item.id" class="draggable-item" :draggable="true" @dragstart="dragStart(index)" @dragover="dragOver(index)" @drop="drop(index)">
            {{ item.name }}
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const app = Vue.createApp({
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  methods: {
    dragStart(index) {
      this.dragIndex = index;
    },
    dragOver(index) {
      // 在元素被拖拽时触发，我们可以在这里实现拖拽时的样式变化
    },
    drop(index) {
      // 在元素被放置时触发，我们可以在这里实现拖拽元素的排序逻辑
      const item = this.list.splice(this.dragIndex, 1)[0];
      this.list.splice(index, 0, item);
    },
  },
});

app.use(ElementPlus);
app.mount('#app');
</script>

第三步：添加样式

.draggable-item {
  cursor: move;
  margin-bottom: 10px;
}

第四步：使用Vue实例

<div id="app"></div>

代码解释

我们首先引入Vue和Element Plus的库文件，这样我们才能在项目中使用它们提供的功能。然后，我们创建一个Vue实例，并在实例的data对象中定义一个列表list，包含一些项，每个项都有一个唯一的id和名称。

我们给每个拖拽元素绑定相关的拖拽事件函数。在dragStart函数中，我们记录拖拽元素的起始位置index，这样我们可以在drop函数中获取到它，并实现元素的排序逻辑。

在drop函数中，我们首先将被拖拽的元素从列表中移除，然后根据目标位置index，将该元素插入到新的位置。这样，拖拽元素的顺序就会发生变化。

最后，我们通过use方法引入Element Plus，并使用mount方法将Vue实例挂载到id为"app"的元素上。

总结

通过使用Vue和Element Plus，我们可以很容易地实现拖拽和排序功能。首先，我们需要安装并引入Vue和Element Plus，然后创建一个Vue实例，并在实例中定义好相关的数据和方法。最后，我们通过绑定事件处理函数来实现元素的拖拽和排序。