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:

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<div class="drag-sort-demo">
  <el-collapse-transition>
    <div v-for="item in list" :key="item.id" class="drag-item" :class="{ 'dragging': draggingId === item.id }" draggable="true" @dragstart="handleDragStart(item)" @dragend="handleDragEnd(item)">
      {{ item.name }}
    </div>
  </el-collapse-transition>
</div>
<el-button type="primary" @click="handleSort">保存排序</el-button>

16b28748ea4df4d9c2150843fecfba68
2. 21c97d3a051048b8e55e3c8f199a54b2
   ;eade7ca5859a8616fade8aeddf46e75a

   
   14668c512d1bc8c7d449ad905e35843d
   .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);

   }
   531ac245ce3e4fe3d50054a55f265927
   
   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:
   • d477f9ce7bf77f53fbcf36bec1b69b7a
   2e4c03ba1a844f9ccaa1fdeb1b48713f8af702b660db9608de9d10e645693392
   import DragSortDemo daripada './components/DragSortDemo.vue';
   3. eksport lalai {
      komponen: {

   <drag-sort-demo></drag-sort-demo>

   },

   };
   <

   <

   projek
   Laksanakan arahan berikut dalam baris arahan untuk memulakan projek:

   npm run serve
   

   Lawati http://localhost:8080 untuk melihat halaman demonstrasi fungsi pengisihan seret dan lepas. Seret item senarai untuk menukar pengisihan, dan klik butang Simpan Isih untuk menyimpan hasil pengisihan.

   
   Kesimpulan:

   Melalui langkah di atas, kami berjaya melaksanakan fungsi pengisihan seret dan lepas menggunakan Vue dan Element-UI. Ini menyediakan penyelesaian yang mudah dan praktikal untuk pembangunan web kami, yang boleh meningkatkan pengalaman pengguna dan mengoptimumkan interaksi antara muka. Saya harap artikel ini dapat membantu kerja pembangunan bahagian hadapan semua orang.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi pengisihan seret dan lepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!