Petua dan amalan terbaik untuk pemilihan seret dan lepas dan peletakan dalam Vue

Vue ialah rangka kerja JavaScript popular yang sesuai untuk membina aplikasi satu halaman (SPA). Ia menyokong pemilihan drag-and-drop dan fungsi peletakan melalui arahan dan komponen, memberikan pengguna pengalaman interaktif yang lebih baik. Artikel ini akan memperkenalkan teknik dan amalan terbaik untuk pemilihan seret dan lepas dan peletakan dalam Vue.

1. Arahan seret

Vue menyediakan arahan boleh seret v yang boleh mencapai kesan seretan dengan mudah. Perintah ini boleh digunakan pada mana-mana elemen, dan boleh menyesuaikan gaya seret, mengehadkan julat seret, dsb.

Berikut ialah contoh mudah:

<template>
  <div v-draggable>
    拖拽我
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  export default {
    directives: {
      draggable
    }
  }
</script>

Dalam contoh di atas, kami mengimport arahan yang disediakan oleh perpustakaan vuedraggable dan mengisytiharkan arahan dalam komponen Vue. Elemen menggunakan v-draggable boleh diseret oleh pengguna.

2. Memilih dan menyahtanda

Dalam operasi seret dan lepas, anda biasanya perlu mengklik untuk memilih elemen sebelum anda boleh menyeretnya. Berikut ialah kod sampel untuk melaksanakan pemilihan dan nyahpilihan:

<template>
  <div v-for="(item, index) in items"
       :key="index"
       :class="{selected: index === selectedIndex}"
       @mousedown="onSelect(index)"
       @mouseup="onDeselect"
       v-draggable>
      {{ item }}
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  export default {
    directives: {
      draggable
    },
    data () {
      return {
        items: ['Item 1', 'Item 2', 'Item 3'],
        selectedIndex: null
      }
    },
    methods: {
      onSelect (index) {
        this.selectedIndex = index
      },
      onDeselect () {
        this.selectedIndex = null
      }
    }
  }
</script>

Dalam contoh di atas, kami menggunakan gelung v-untuk untuk memaparkan senarai dan menyimpan indeks elemen yang sedang dipilih oleh pengguna melalui pembolehubah Indeks terpilih. Apabila elemen diklik, kaedah onSelect akan dipanggil untuk mengemas kini pembolehubah SelectIndex apabila tetikus dinaikkan, SelectedIndex akan dikemas kini menjadi kosong, menunjukkan bahawa pengguna telah membatalkan operasi pemilihan.

3. Seret Had

Semasa operasi seret, kadangkala perlu mengehadkan julat dan arah seretan. Vue menyediakan beberapa cara untuk melaksanakan sekatan ini.

3.1 Hadkan julat

Dengan melepasi objek yang mengandungi koordinat mula dan akhir dalam v-draggable, anda boleh mengehadkan julat seret. Berikut ialah kod contoh:

<template>
  <div v-for="(item, index) in items"
       :key="index"
       :class="{selected: index === selectedIndex}"
       @mousedown="onSelect(index)"
       @mouseup="onDeselect"
       v-draggable="{startX: 0, startY: 0, endX: 100, endY: 100}">
      {{ item }}
  </div>
</template>

Dalam contoh di atas, kami mengehadkan julat seret ke sudut kiri atas (0, 0) ke sudut kanan bawah (100, 100), dan pengguna tidak boleh menyeret elemen ke luar ini julat.

3.2 Hadkan arah

Dengan melepasi atribut paksi dalam v-draggable, anda boleh mengehadkan arah menyeret elemen. Berikut ialah kod contoh:

<template>
  <div v-for="(item, index) in items"
       :key="index"
       :class="{selected: index === selectedIndex}"
       @mousedown="onSelect(index)"
       @mouseup="onDeselect"
       v-draggable="{axis: 'x'}">
      {{ item }}
  </div>
</template>

Dalam contoh di atas, kami menetapkan paksi kepada 'x', yang bermaksud bahawa elemen hanya boleh diseret sepanjang arah mendatar.

4. Kendalian tempat

Selepas menyeret selesai, biasanya perlu meletakkan elemen di lokasi yang ditentukan. Vue menyediakan arahan v-droppable yang boleh digunakan untuk melaksanakan operasi drop.

Berikut ialah proses pelaksanaan yang mudah:

<template>
  <div>
    <div v-for="(item, index) in items"
         :key="index"
         :class="{selected: index === selectedIndex}"
         @mousedown="onSelect(index)"
         @mouseup="onDeselect"
         v-draggable>
        {{ item }}
    </div>
    <div v-droppable @drop="onDrop">
      放置目标
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        items: ['Item 1', 'Item 2', 'Item 3'],
        selectedIndex: null
      }
    },
    methods: {
      onSelect (index) {
        this.selectedIndex = index
      },
      onDeselect () {
        this.selectedIndex = null
      },
      onDrop (evt) {
        const droppedItem = this.items[this.selectedIndex]
        this.$set(this.items, this.selectedIndex, null)
        this.$set(this.items, evt.target.dataset.index, droppedItem)
        this.selectedIndex = null
      }
    }
  }
</script>

Dalam contoh di atas, kami menggunakan arahan v-droppable untuk menetapkan elemen div sebagai sasaran jatuh Apabila pengguna menyeret dan menjatuhkan elemen yang diseret ke elemen div, The acara drop akan dicetuskan dan kami melaksanakan operasi peletakan elemen dalam kaedah onDrop.

Walaupun kod di atas boleh melaksanakan operasi peletakan elemen, ia masih mempunyai beberapa kelemahan. Sebagai contoh, kita tidak boleh mengetahui kedudukan elemen sasaran daripada elemen yang diseret. Pada masa ini, kami boleh menggunakan beberapa antara muka tambahan acara seret dan lepas untuk menyelesaikan masalah ini.

5. Amalan Terbaik

Melaksanakan operasi drag-and-drop yang lancar memerlukan pertimbangan menyeluruh dari pelbagai aspek, jadi kita harus mencuba yang terbaik untuk memenuhi amalan terbaik berikut dalam amalan:

• Gunakan acara asli dan drag-and- lepaskan antara muka acara sebanyak mungkin, bukannya melaksanakan logik seret dan lepas tersuai.
• Hadkan operasi seret dan lepas elemen, seperti mengehadkan julat dan arah, untuk memastikan pengalaman pengguna.
• Apabila melakukan operasi peletakan, anda perlu mempertimbangkan pelbagai faktor, seperti sama ada terdapat elemen lain yang menghalangnya.
• Semasa melaksanakan operasi drag-and-drop, adalah perlu untuk memastikan kebolehskalaan dan kebolehselenggaraan kod.

Ringkasnya, melalui penggunaan arahan yang fleksibel dan antara muka acara drag-and-drop, kami bukan sahaja boleh mencapai operasi drag-and-drop yang lancar, tetapi juga meningkatkan pengalaman pengguna dan membawa kesan interaktif yang lebih baik kepada aplikasi.

Atas ialah kandungan terperinci Petua dan amalan terbaik untuk pemilihan seret dan lepas dan peletakan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!