Cómo implementar funciones de arrastrar y soltar y ordenar en Vue

Implemente funciones de arrastrar y soltar y ordenar en Vue

En las aplicaciones web, implementar funciones de arrastrar y soltar y ordenar es un requisito muy común, especialmente en interfaces de administración, listas de tareas e interfaces gráficas de usuario. Como marco de JavaScript popular, Vue.js proporciona muchas herramientas y bibliotecas para simplificar la implementación de funciones de arrastrar y soltar y de clasificación. Este artículo presentará cómo usar Vue para implementar una función de clasificación y arrastrar y soltar simple pero poderosa.

Preparación

Antes de comenzar, asegúrese de tener instalada la CLI de Vue y crear un proyecto de Vue. Si aún no ha instalado Vue CLI, use el siguiente comando para instalarlo:

npm install -g @vue/cli

Luego puede crear un nuevo proyecto de Vue usando Vue CLI:

vue create my-drag-and-drop-app

Ingrese al directorio del proyecto:

cd my-drag-and-drop-app

Usando la biblioteca Vue-Draggable

Una biblioteca muy útil a la hora de implementar la funcionalidad de arrastrar y ordenar en Vue es vue-draggable. Esta biblioteca le permite implementar fácilmente arrastrar, ordenar e interacciones complejas. Instalémoslo primero:

npm install vuedraggable

Crear una lista ordenable

Primero, creemos una lista ordenable para que los usuarios puedan arrastrar y ordenar elementos dentro de ella. Abra el archivo de su componente Vue (generalmente .vueun archivo) y modifíquelo de la siguiente manera.

<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>

En el código anterior, importamos vuedraggableel componente y lo usamos en la plantilla para crear una lista de tareas ordenable. v-modelLa directiva vincula los datos a tasksla matriz, que son los datos que queremos ordenar. dragOptionsContiene opciones para configurar el comportamiento de arrastre, como animaciones y grupos.

Agregar nueva tarea

A continuación, agreguemos una función que permita al usuario ingresar nuevas tareas y agregarlas a la lista de tareas. Usaremos el enlace de datos bidireccional de Vue para lograr esto.

<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>

En el código anterior,

Agregamos un cuadro de entrada que permite al usuario ingresar nuevas tareas. v-modelLa instrucción vincula el valor del cuadro de entrada al newTaskatributo de datos, escucha el evento de la tecla Intro y activa un método para agregar una nueva tarea @keyup.entercuando el usuario presiona la tecla Intro .addTask

Funciones completas de arrastrar, soltar y ordenar

Ahora tiene una lista de tareas con función de arrastrar y soltar. Puede ejecutar su aplicación Vue en el navegador y probar estas funciones. Inicie el servidor de desarrollo Vue con el siguiente comando:

npm run serve

Luego, visite http://localhost:8080para ver su solicitud.

Resumir

Implementar funciones de arrastrar y soltar y ordenar en Vue es muy simple: con la ayuda de vuedraggablebibliotecas, puede crear fácilmente listas ordenables e interfaces interactivas. En la práctica, puede ampliar y personalizar aún más estas funciones para satisfacer sus necesidades específicas. Espero que este artículo le ayude y le brinde una mejor comprensión de cómo implementar funciones de arrastrar y soltar y ordenar en Vue. ¡Feliz codificación!