Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi isihan seret dan lepas

Kata Pengantar:
Dalam pembangunan web, fungsi isihan seret dan lepas ialah fungsi biasa dan praktikal. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi pengisihan seret dan lepas dan menunjukkan proses pelaksanaan melalui contoh kod.

1. Persediaan persekitaran

1. Pasang Node.js
   Sebelum anda mula, anda perlu memasang Node.js. Anda boleh melawati https://nodejs.org/ untuk memuat turun dan memasang versi yang sepadan dengan sistem pengendalian.
2. Pasang Vue CLI
   Vue CLI ialah alat untuk membina projek Vue dengan cepat. Buka alat baris arahan dan laksanakan arahan berikut untuk memasang Vue CLI:

npm install -g @vue/cli

3. Buat projek Vue
   Jalankan arahan berikut dalam baris arahan untuk mencipta projek Vue baharu:

vue create drag -sort-demo

Ikuti gesaan untuk memilih pilihan konfigurasi dan tunggu projek dibuat.

4. Pasang Element-UI
   Masukkan direktori projek Vue yang baru anda buat, dan laksanakan arahan berikut pada baris arahan untuk memasang Element-UI:

npm install element-ui

2 fungsi menyusun ui';

1. Vue.use(ElementUI);
   

Buat komponen baharu DragSortDemo.vue dalam src/komponen direktori untuk menunjukkan fungsi pengisihan seret dan lepas . Edit fail DragSortDemo.vue dan tambahkan kod berikut:

return {
  list: [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' },
    { id: 4, name: 'D' },
    { id: 5, name: 'E' },
  ],
  draggingId: null,
};

handleDragStart(item) {
  this.draggingId = item.id;
},
handleDragEnd() {
  this.draggingId = null;
},
handleSort() {
  const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) => {
    const id = el.getAttribute('data-id');
    const name = el.textContent;
    return { id, name, sort: index + 1 };
  });
  // 將排序后的列表保存到數(shù)據(jù)庫或發(fā)送給后端
},