How to use vue and Element-plus to implement drag-and-drop and sorting functions

Introduction:
In modern Web development, user interaction experience is becoming more and more important. Drag-and-drop and sorting functions are common interactive operations that allow users to easily rearrange elements or adjust the position of elements. This article will introduce how to use Vue and Element-plus libraries to implement drag-and-drop and sorting functions, and provide corresponding code examples.

Technical preparation:
In order to start writing code related to Vue and Element-plus, we need to prepare some tools and environment first. First, make sure you have Node.js and Vue CLI installed. Then, run the following command on the command line to create a new Vue project:

vue create drag-and-sort-demo

Select the default configuration according to the prompts or configure it according to your own needs. Next, install the Element-plus library:

cd drag-and-sort-demo
npm install element-plus

After everything is ready, we start writing code.

Implement drag and drop function:
First, we need to introduce the Element-plus library into the Vue component and register the components that need to be used:

<template>
  <div>
    <el-col :span="12">
      <el-card>
        <el-button type="success" icon="el-icon-plus" @click="addElement">
          Add Element
        </el-button>
        <el-draggable v-model="list">
          <template #item="{ element }">
            <el-card :header="element.title" shadow="hover">
              {{ element.content }}
            </el-card>
          </template>
        </el-draggable>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import { ElButton, ElCard, ElCol, ElDraggable } from "element-plus";

export default {
  components: {
    ElButton,
    ElCard,
    ElCol,
    ElDraggable,
  },
  data() {
    return {
      list: [
        { title: "Card 1", content: "This is card 1" },
        { title: "Card 2", content: "This is card 2" },
        { title: "Card 3", content: "This is card 3" },
      ],
    };
  },
  methods: {
    addElement() {
      this.list.push({ title: "New Card", content: "This is a new card" });
    },
  },
};
</script>

In the above code, we use el-draggable component to implement dragging function. The v-model directive binds an array named list, which stores all card elements. By clicking the "Add Element" button, you can dynamically add new card elements to the list array. The template tag is used inside el-draggable to define the style and content of each card element.

Next, let’s implement the sorting function.

Implement the sorting function:
In order to implement the sorting function, we need to use the @change event of the el-draggable component and the corresponding sorting algorithm. The following is our modified code:

<template>
  <div>
    <el-col :span="12">
      <el-card>
        <el-button type="success" icon="el-icon-plus" @click="addElement">
          Add Element
        </el-button>
        <el-draggable v-model="list" @change="handleSort">
          <template #item="{ element }">
            <el-card :header="element.title" shadow="hover">
              {{ element.content }}
            </el-card>
          </template>
        </el-draggable>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import { ElButton, ElCard, ElCol, ElDraggable } from "element-plus";

export default {
  components: {
    ElButton,
    ElCard,
    ElCol,
    ElDraggable,
  },
  data() {
    return {
      list: [
        { title: "Card 1", content: "This is card 1" },
        { title: "Card 2", content: "This is card 2" },
        { title: "Card 3", content: "This is card 3" },
      ],
    };
  },
  methods: {
    addElement() {
      this.list.push({ title: "New Card", content: "This is a new card" });
    },
    handleSort(event) {
      const { newIndex, oldIndex } = event;
      const movedElement = this.list.splice(oldIndex, 1)[0];
      this.list.splice(newIndex, 0, movedElement);
    },
  },
};
</script>

In the above code, we added a method named handleSort, which will be called after the drag is completed. By extracting newIndex and oldIndex in the @change event, we can obtain the new and old positions of the dragged card element in the array, and pass The splice method of the array implements sorting.

Summary:
This article introduces how to use Vue and Element-plus to implement drag-and-drop and sorting functions. Through el-draggable components and corresponding event handling methods, we can easily implement dragging and sorting operations. I hope this article will be helpful to you when developing web applications using Vue and Element-plus.

The above is the detailed content of How to use vue and Element-plus to implement drag-and-drop and sorting functions. For more information, please follow other related articles on the PHP Chinese website!