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

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

import 'element-ui /lib/theme-chalk/index.css';

1. Vue.use(ElementUI);
   

Buat komponen demo

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,
};

},
kaedah: {

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 };
  });
  // 将排序后的列表保存到数据库或发送给后端
},

},
};

.drag-sort-demo {

rap: flex;-wrap : wrap ;

}

.drag-item {

padding: 10px;
margin: 10px 0;
background-color: #f5f5f5;

border: 1px solid #ebebeb;

cursor: move;
peralihan bayang-bayang: 0.3s ;
}

.drag-item.dragging {

box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}


Penjelasan:

Penjelasan:

templat, Gunakan arahan v-for untuk memaparkan item senarai secara dinamik. Kelas item senarai terikat pada sifat yang dikira, yang digunakan untuk menentukan sama ada item yang diseret pada masa ini ialah item senarai.

Tambahkan atribut boleh seret pada setiap item senarai dan daftarkan pengendali acara seret dan seret untuk mencetuskan acara mula dan tamat seretan. Kaedah

handleSort menyimpan atau menghantar data senarai yang diisih seret dan lepas ke bahagian belakang untuk diproses.

Menggunakan komponen

Gunakan komponen DragSortDemo dalam fail src/App.vue: