Bagaimana untuk memaparkan ikon terlarang semasa menyeret dalam vue

Apabila pembangunan bahagian hadapan menjadi lebih popular dan popular, menggunakan rangka kerja JavaScript menjadi semakin popular apabila menulis tapak web atau aplikasi. Vue.js ialah salah satu rangka kerja JavaScript yang paling popular di luar sana, dan ia menyediakan banyak cara mudah untuk membina antara muka pengguna yang responsif dan interaktif. Melaksanakan fungsi drag-and-drop dalam Vue.js ialah keperluan yang sangat biasa Artikel ini akan memperkenalkan cara menggunakan fungsi drag-and-drop dalam Vue.js dan memaparkan ikon larangan semasa menyeret.

Langkah 1: Pasang dan import pemalam Vue.draggable

Pemalam Vue.draggable ialah pemalam yang sangat berguna yang membolehkan anda melaksanakan drag-and-drop dengan mudah fungsi dalam Vue. Untuk memasang pemalam ini, anda boleh menggunakan alat pengurusan pakej npm dan anda boleh menggunakan arahan berikut:

npm install vuedraggable --save

Selepas melengkapkan pemasangan, anda perlu mengimport pemalam Vue.draggable dalam projek Vue:

import draggable from 'vuedraggable'
Vue.component('draggable', draggable)

Langkah 2: Gunakan Vue.draggable untuk melaksanakan fungsi drag-and-drop

Sekarang anda telah berjaya memasang dan mengimport pemalam Vue.draggable, kami akan menggunakannya untuk melaksanakan fungsi drag-and-drop. Pertama, kita perlu menentukan elemen yang ingin kita seret dalam templat.

<template>
  <div>
    <div class="container">
      <div class="item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
    <draggable :list="items" :options="{ handle:&#39;.handle&#39; }" @end="onEnd">
      <div class="draggable-item handle">{{ items }}</div>
    </draggable>
  </div>
</template>

Dalam templat di atas, kami telah menggunakan pemalam Vue.draggable untuk melaksanakan fungsi seret dan lepas kami. Kami mentakrifkan bekas dengan berbilang elemen dan setiap elemen mengandungi indeks dan nilai dalam tatasusunan "item". Kami juga mentakrifkan elemen boleh seret yang boleh kami seret dan lepaskan ke dalam bekas.

Selepas kita mentakrifkan elemen, kita perlu menentukan kaedah untuk bertindak balas terhadap peristiwa seret dan lepas. Dalam kaedah ini kita boleh menyemak sama ada peristiwa seret dan lepas berlaku di luar bekas. Jika ya, kami boleh memaparkan ikon lumpuhkan.

methods: {
  onEnd(event) {
    const nodeList = document.querySelectorAll('.vuedraggable-container')
    const dragList = nodeList[0].getBoundingClientRect()
    const container = document.querySelector('.container').getBoundingClientRect()
    if (dragList.top < container.top || dragList.bottom > container.bottom) {
      event.preventDefault()
      console.log('Do not drop outside of the container!')
    }
  }
},

Dalam kaedah ini, kita mula-mula mendapatkan kedudukan bekas dan semak sama ada peristiwa seretan berlaku di luar bekas. Jika ya, kami menggunakan kaedah event.preventDefault() untuk menghalang kelakuan lalai acara seret dan lepas dan mengeluarkan mesej amaran.

Perkara terakhir yang perlu diingat dari segi pelaksanaan kod ialah menambah gaya pada bekas.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  flex: 1;
  margin: 5px;
  padding: 10px;
  background: #eee;
  text-align: center;
  cursor: move;
}
.draggable-item {
  margin: 5px;
  padding: 10px;
  background: #7a7a7a;
  color: #fff;
  text-align: center;
  cursor: move;
}

Di sini, kami mentakrifkan gaya kontena dan gaya item. Kami juga menambah gaya untuk elemen boleh seret.

Sekarang kami telah berjaya melaksanakan fungsi seret dan lepas dalam Vue.js, apabila elemen diseret, ikon lumpuhkan akan dipaparkan. Ini ialah cara mudah untuk melaksanakan keperluan yang sangat biasa, dan menggunakan Vue.js dan pemalamnya, kami boleh melaksanakan fungsi drag-and-drop yang kompleks dengan lebih mudah.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan ikon terlarang semasa menyeret dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!