Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi menyeret dan menyusun data

Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi penyeretan dan pengisihan data

Pengenalan:
Dengan pembangunan aplikasi web, fungsi penyeretan dan pengisihan data telah menjadi bahagian penting dalam banyak aplikasi. Sebagai rangka kerja JavaScript moden, Vue.js menyediakan pengikatan data yang mudah dan kaedah pembangunan berasaskan komponen, manakala Element-UI, sebagai rangka kerja UI berdasarkan Vue.js, menyediakan satu siri komponen yang sangat baik dan kesan interaktif. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi penyeretan dan pengisihan data serta memberikan kod sampel.

1. Persediaan
   Sebelum bermula, kita perlu menyediakan persekitaran pembangunan yang berkaitan. Mula-mula, pastikan anda memasang Node.js dan npm. Kemudian, pasang Vue dan Element-UI melalui npm.

   npm install vue
   npm install element-ui

   Selepas pemasangan selesai, buat projek Vue baharu dan perkenalkan perpustakaan Element-UI.

   vue create drag-sort-demo
   cd drag-sort-demo
   npm install element-ui

   Seterusnya, perkenalkan Vue dan Element-UI dalam fail masukan Vue main.js, dan gunakan kaedah Vue.use() untuk mendaftarkan komponen Element-UI.

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)
   
   new Vue({
     render: h => h(App)
   }).$mount('#app')

   Pada ketika ini, kami telah menyelesaikan kerja penyediaan, dan seterusnya kami akan mula melaksanakan fungsi menyeret dan menyusun data.

2. Melaksanakan senarai data
   Pertama, kita perlu mencipta senarai data untuk memaparkan item data boleh seret dan boleh diisih. Dalam komponen Vue, anda boleh menggunakan arahan v-for untuk melintasi senarai data dan menggunakan komponen el-kad untuk memaparkan setiap item data.

   <template>
     <div>
    <el-card v-for="item in list" :key="item.id">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      list: [
        { id: 1, name: '数据项1' },
        { id: 2, name: '数据项2' },
        { id: 3, name: '数据项3' },
        { id: 4, name: '数据项4' },
        { id: 5, name: '数据项5' }
      ]
    }
     }
   }
   </script>

   Kini, kami telah melengkapkan paparan senarai data.

3. Tambah fungsi seret dan lepas
   Seterusnya, kami akan menambah fungsi seret dan lepas untuk setiap item data. Dalam Element-UI, anda boleh menggunakan arahan el-draggable untuk melaksanakan fungsi drag-and-drop. Kami boleh menambah arahan el-draggable pada komponen el-card dan mengikat sifat yang berkaitan dengan item data.

   <template>
     <div>
    <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     // ...
     directives: {
    'el-draggable': {
      bind(el, binding, vnode) {
        el.draggable = true
        el.addEventListener('dragstart', (event) => {
          event.dataTransfer.setData('text/plain', JSON.stringify(binding.value))
        })
      }
    }
     }
   }
   </script>

   Dalam arahan el-draggable, kami menetapkan atribut draggable bagi elemen kepada true untuk mendayakan fungsi draggable. Kemudian, dalam acara dragstart, kami menyimpan nilai item data semasa sebagai rentetan JSON ke dalam objek DataTransfer.

4. Tambah fungsi pengisihan
   Selain fungsi seret dan lepas, kita juga perlu melaksanakan fungsi isihan selepas menyeret item data ke kedudukan yang ditentukan. Dalam Element-UI, anda boleh menggunakan arahan el-dropzone untuk melaksanakan fungsi pengisihan. Kami boleh menambah arahan el-dropzone pada bekas tempat komponen el-card terletak dan mengikat sifat yang berkaitan dengan senarai data.

   <template>
     <div v-el-dropzone="list">
    <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     // ...
     directives: {
    'el-draggable': {
      // ...
      bind(el, binding, vnode) {
        // ...
        el.addEventListener('dragend', () => {
          vnode.context.$forceUpdate();
        })
      }
    },
    'el-dropzone': {
      bind(el, binding, vnode) {
        el.addEventListener('dragover', (event) => {
          event.preventDefault()
        })
        el.addEventListener('drop', (event) => {
          event.preventDefault()
          const draggedItem = JSON.parse(event.dataTransfer.getData('text/plain'))
          const newList = binding.value.slice()
          const index = newList.findIndex(item => item.id === draggedItem.id)
          newList.splice(index, 1)
          newList.splice(el.dataset.index, 0, draggedItem)
          vnode.context[binding.expression] = newList
        })
      }
    }
     }
   }
   </script>

   Dalam arahan el-dropzone, kami memanggil kaedah preventDefault dalam acara dragover untuk menghalang kelakuan drag-and-drop lalai penyemak imbas. Kemudian, dalam acara drop, kami mendapat item data yang diseret dan mencari kedudukannya dalam senarai data asal berdasarkan idnya. Kami kemudian membuat salinan baharu senarai data, mengalih keluar item data yang diseret daripadanya dan memasukkan item data di lokasi yang ditentukan. Akhir sekali, kami mengemas kini senarai data dengan mengubah suai atribut data yang sepadan dalam tika Vue.

5. Paparan kesan

Selepas melaksanakan langkah-langkah di atas, kami telah menyelesaikan pembangunan fungsi menyeret dan menyusun data. Sekarang kita boleh menjalankan projek dan melihat kesannya.

npm run serve

Buka penyemak imbas dan lawati http://localhost:8080 untuk melihat senarai data dengan fungsi seret dan lepas serta isihan.

Kesimpulan:
Artikel ini memperincikan cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi menyeret dan menyusun data. Dengan menggunakan arahan el-draggable dan el-dropzone, kami boleh menambahkan fungsi penyeretan dan pengisihan pada senarai data dengan mudah. Saya harap artikel ini akan membantu pembangun yang sedang membangunkan aplikasi web supaya mereka boleh melaksanakan fungsi biasa ini dengan lebih cekap.

Pautan rujukan:

• Dokumentasi rasmi Vue: https://cn.vuejs.org/
• Dokumentasi rasmi Element-UI: https://element.eleme.io/

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