Cara menggunakan dan melaksanakan fungsi pengisihan seret dan lepas dalam dokumen Vue

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular hari ini Ia menyediakan pelbagai fungsi dan alatan untuk membantu kami membangunkan pelbagai aplikasi web dengan mudah. Satu ciri yang sangat berguna ialah seret dan lepas, yang membolehkan pengguna menyeret elemen dari satu lokasi pada halaman ke yang lain. Vue menyediakan beberapa arahan dan fungsi terbina dalam yang memudahkan untuk mencipta dan mengurus operasi seret dan lepas, termasuk fungsi pengisihan seret dan lepas. Artikel ini akan memperkenalkan penggunaan dan kesan fungsi pengisihan seret dan lepas dalam dokumen Vue.

Apakah fungsi isihan seret?

Fungsi isihan seret ialah fungsi yang disediakan oleh Vue, yang digunakan untuk melaksanakan operasi seretan dan unsur seretan isih. Ia membolehkan kami menukar susunan elemen dengan menyeret menggunakan tetikus, dan ia dicerminkan pada paparan serta-merta. Ia boleh digunakan pada pelbagai senario, seperti mengisih senarai, mengisih senarai tugas, mengisih imej, dsb.

Dalam dokumen Vue, fungsi pengisihan seret dan lepas disediakan oleh rangka kerja Vue dan tidak perlu dimuat turun atau diimport secara berasingan.

Bagaimana untuk menggunakan fungsi pengisihan seret dan lepas?

Kami boleh mendayakan fungsi seret dengan menggunakan arahan terbina dalam Vue v-draggable. Arahan ini boleh digunakan pada mana-mana elemen HTML dan menyediakan banyak pilihan dan pengendali acara. Berikut ialah contoh asas:

<template>
  <div v-draggable="options">
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3"],
      options: {
        draggable: ".draggable",
        handle: ".handle",
        animation: 200
      }
    }
  }
}
</script>

Dalam kod di atas, kami mendayakan fungsi seret dengan menambahkan arahan <div> pada elemen bekas luar (iaitu teg v-draggable). Kami kemudian menggunakan arahan v-for untuk menjana senarai yang mengandungi semua elemen boleh disusun. Kami juga mentakrifkan beberapa pilihan seret dan lepas dalam atribut data, seperti mendayakan pemilih CSS untuk elemen boleh seret, elemen sasaran untuk elemen seret, dsb.

Kita boleh menambah pengendali acara methods dalam sifat onDragEnd tika Vue untuk bertindak balas kepada peristiwa yang dicetuskan apabila pengguna menyeret elemen. Dalam onDragEnd, kita boleh membalikkan susunan tatasusunan elemen untuk mencapai kesan pengisihan seret dan lepas unsur.

export default {
  methods: {
    onDragEnd(event) {
      let items = this.items;
      let oldIndex = event.oldIndex;
      let newIndex = event.newIndex;
      if (newIndex >= items.length) {
        let k = newIndex - items.length;
        while ((k--) + 1) {
          items.push(undefined);
        }
      }
      items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]);
    }
  }
}

Dalam kod di atas, kita mula-mula mendapatkan tatasusunan, indeks lama dan indeks baharu elemen. Kemudian, kami menggunakan kaedah splice() untuk mengalihkan kedudukan elemen dan membalikkan susunan tatasusunan elemen untuk mencapai kesan pengisihan seret dan lepas.

Kesan fungsi isihan seret dan lepas

Menggunakan fungsi isihan seret dan lepas yang disediakan dalam dokumentasi Vue, pelbagai operasi isihan berguna boleh dicapai. Contohnya, anda boleh menyeret sekumpulan imej ke halaman dalam susunan tertentu, kemudian gunakan isihan seret dan lepas untuk melaraskan kedudukan dan susunannya dengan mudah. Anda juga boleh menggunakan ciri ini untuk mengisih senarai tugas drag-and-drop anda supaya anda boleh menyenaraikan semua tugasan anda yang belum selesai bersama-sama sekali gus.

Selain melaraskan susunan unsur visual yang boleh dilihat, fungsi isihan seret dan lepas juga boleh digunakan untuk mengisih elemen berfungsi. Contohnya, dalam aplikasi berasaskan Vue, anda boleh membuat senarai tugasan yang boleh diisih, di mana setiap tugas mempunyai status bebas, tarikh tamat dan sifat lain. Melalui operasi pengisihan seret dan lepas, pengguna boleh mengubah suai susunan tugas dan perhubungan antara tugas dengan mudah untuk mengurus senarai tugas dengan lebih baik.

Kesimpulan

Dalam dokumen Vue, pelbagai operasi pengisihan boleh dilaksanakan dengan mudah menggunakan fungsi pengisihan seret dan lepas. Ini berguna untuk semua jenis aplikasi, termasuk pengurusan tugas, senarai semak dan imej. Dengan menggunakan fungsi pengisihan seret dan lepas dengan arahan terbina dalam Vue dan pengendali acara, kami boleh mencapai kesan pengisihan yang hebat dan melaraskan kedudukan dan susunan elemen dengan mudah.

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