How to implement drag and drop and sorting functions in Vue

Implement drag-and-drop and sorting functions in Vue

In web applications, implementing drag-and-drop and sorting functions is a very common requirement, especially in management interfaces, task lists, and graphical user interfaces. As a popular JavaScript framework, Vue.js provides many tools and libraries to simplify the implementation of drag-and-drop and sorting functions. This article will introduce how to use Vue to implement a simple but powerful drag-and-drop and sorting function.

Preparation

Before starting, make sure you have the Vue CLI installed and a Vue project created. If you haven't installed Vue CLI yet, use the following command to install it:

npm install -g @vue/cli

You can then create a new Vue project using the Vue CLI:

vue create my-drag-and-drop-app

Enter the project directory:

cd my-drag-and-drop-app

Using the Vue-Draggable library

A very useful library when implementing drag and sort functionality in Vue is vue-draggable. This library allows you to easily implement dragging, sorting, and complex interactions. Let's install it first:

npm install vuedraggable

Create a sortable list

First, let's create a sortable list so that users can drag and sort items within it. Open your Vue component file (usually .vuefile) and modify it as follows.

<template>
  <div>
    <h2>任务列表</h2>
    <draggable v-model="tasks" :options="dragOptions">
      <div
        v-for="(task, index) in tasks"
        :key="task.id"
        class="task"
      >
        {
   
   { task.text }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        { id: 1, text: "任务 1" },
        { id: 2, text: "任务 2" },
        { id: 3, text: "任务 3" },
        { id: 4, text: "任务 4" },
      ],
      dragOptions: {
        animation: 200,
        group: "tasks",
      },
    };
  },
};
</script>

<style>
.task {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: grab;
}
</style>

In the above code, we imported vuedraggablethe component and used it in the template to create a sortable task list. v-modelThe directive binds the data to tasksthe array, which is the data we want to sort. dragOptionsContains options for configuring drag behavior such as animations and groups.

Add new task

Next, let's add a feature that allows the user to enter new tasks and add them to the task list. We will use Vue's two-way data binding to achieve this.

<template>
  <div>
    <h2>任务列表</h2>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="添加任务" />
    <draggable v-model="tasks" :options="dragOptions">
      <div
        v-for="(task, index) in tasks"
        :key="task.id"
        class="task"
      >
        {
   
   { task.text }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        { id: 1, text: "任务 1" },
        { id: 2, text: "任务 2" },
        { id: 3, text: "任务 3" },
        { id: 4, text: "任务 4" },
      ],
      newTask: "",
      dragOptions: {
        animation: 200,
        group: "tasks",
      },
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() === "") return;
      const newId = this.tasks.length + 1;
      this.tasks.push({ id: newId, text: this.newTask });
      this.newTask = "";
    },
  },
};
</script>

In the above code,

We added an input box that allows the user to enter new tasks. v-modelThe instruction binds the value of the input box to the newTaskdata attribute, listens for the Enter key event, and triggers a method to add a new task @keyup.enterwhen the user presses the Enter key .addTask

Complete drag and drop and sort functions

Now you have a task list with drag and drop functionality. You can run your Vue application in the browser and test these features. Start the Vue development server with the following command:

npm run serve

Then, visit http://localhost:8080to view your application.

Summarize

Implementing drag-and-drop and sorting functions in Vue is very simple. With the help of vuedraggablelibraries, you can easily create sortable lists and interactive interfaces. In practice, you can further extend and customize these features to meet your specific needs. I hope this article will help you and give you a better understanding of how to implement drag-and-drop and sorting functions in Vue. Happy coding!