Cara menggunakan vue dan Element-plus untuk melaksanakan fungsi drag-and-drop dan pengisihan

Cara menggunakan vue dan Element-plus untuk melaksanakan fungsi drag-and-drop dan sorting

Pengenalan:
Dalam pembangunan web moden, pengalaman interaksi pengguna menjadi semakin penting. Fungsi seret dan lepas dan isihan ialah operasi interaktif biasa yang membolehkan pengguna menyusun semula elemen dengan mudah atau melaraskan kedudukan elemen. Artikel ini akan memperkenalkan cara menggunakan perpustakaan Vue dan Element-plus untuk melaksanakan fungsi drag-and-drop dan pengisihan serta menyediakan contoh kod yang sepadan.

Persediaan teknikal:
Untuk mula menulis kod yang berkaitan dengan Vue dan Element-plus, kita perlu menyediakan beberapa alatan dan persekitaran terlebih dahulu. Mula-mula, pastikan anda memasang Node.js dan Vue CLI. Kemudian, jalankan arahan berikut pada baris arahan untuk mencipta projek Vue baharu:

vue create drag-and-sort-demo

Ikut gesaan untuk memilih konfigurasi lalai atau konfigurasikannya mengikut keperluan anda. Seterusnya, pasang perpustakaan Element-plus:

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

Selepas semuanya siap, kami mula menulis kod.

Laksanakan fungsi seret dan lepas:
Pertama, kita perlu memperkenalkan perpustakaan Element-plus ke dalam komponen Vue dan mendaftarkan komponen yang perlu digunakan:

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

Dalam kod di atas, kami menggunakan el- draggable Komponen untuk melaksanakan fungsi seret dan lepas. Arahan v-model mengikat tatasusunan bernama list, yang menyimpan semua elemen kad. Dengan mengklik butang "Tambah Elemen", anda boleh menambah elemen kad baharu secara dinamik pada tatasusunan senarai. Teg template digunakan dalam el-draggable untuk menentukan gaya dan kandungan setiap elemen kad. el-draggable组件来实现拖拽功能。v-model指令绑定了一个名为list的数组，该数组存储了所有的卡片元素。通过点击"Add Element"按钮，可以向list数组中动态添加新的卡片元素。在el-draggable内部使用了template标签来定义每个卡片元素的样式和内容。

接下来，我们来实现排序功能。

实现排序功能：
为了实现排序功能，我们需要使用el-draggable组件的@change事件以及相应的排序算法。下面是我们修改后的代码：

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

在上述代码中，我们添加了一个名为handleSort的方法，该方法会在拖拽完成后被调用。通过提取@change事件中的newIndex和oldIndex，我们可以获取被拖拽的卡片元素在数组中的新位置和旧位置，并通过数组的splice方法实现排序。

总结：
本文介绍了如何使用Vue和Element-plus实现拖拽和排序功能。通过el-draggable

Seterusnya, mari laksanakan fungsi pengisihan. 🎜🎜Laksanakan fungsi isihan: 🎜Untuk melaksanakan fungsi isihan, kita perlu menggunakan acara @change komponen el-draggable dan algoritma isihan yang sepadan. Berikut ialah kod kami yang diubah suai: 🎜rrreee🎜 Dalam kod di atas, kami menambah kaedah bernama handleSort, yang akan dipanggil selepas seretan selesai. Dengan mengekstrak newIndex dan oldIndex dalam acara @change, kami boleh mendapatkan kedudukan baharu dan lama bagi elemen kad yang diseret dalam tatasusunan , dan pengisihan dilaksanakan melalui kaedah splice tatasusunan. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan cara menggunakan Vue dan Element-plus untuk melaksanakan fungsi drag-and-drop dan pengisihan. Melalui komponen el-draggable dan kaedah pengendalian acara yang sepadan, kami boleh melaksanakan operasi menyeret dan mengisih dengan mudah. Saya harap artikel ini akan membantu anda apabila membangunkan aplikasi web menggunakan Vue dan Element-plus. 🎜

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk melaksanakan fungsi drag-and-drop dan pengisihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!