Bagaimana untuk melaksanakan fungsi menyeret elemen? Artikel berikut akan membawa anda langkah demi langkah untuk memahami cara menggunakan Vue3 untuk melaksanakan fungsi penyeretan elemen elegan, dan mempelajari mata pengetahuan yang berkaitan melalui contoh, saya harap ia akan membantu anda!

Syorkan beberapa alatan berguna

• var-conv untuk nama pembolehubah Kod IDE VSCode dengan cepat alat penukaran
• generator-vite-plugin Cepat menjana projek templat pemalam Vite
• generator-babel-plugin Menjana Babel Plug-in dengan pantas projek templat

Menjadi intipati

Seretan elemen ialah kes pembelajaran bahagian hadapan biasa, yang memerlukan pemahaman tertentu tentang acara JavaScript Saya juga mengambil kandungan ini sekali lagi dalam kerja saya baru-baru ini, dan menerangkannya dengan jelas dengan menyeret elemen sekali dalam rangka kerja gaya pengaturcaraan deklaratif seperti Vue3. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

PS: Atribut pemusatan dalam gaya global templat Vue3 boleh menyebabkan gangguan percubaan, sila bayar perhatian! ! !

Kedudukan dan pergerakan elemen

Apabila melaksanakan penyeretan elemen, kami menggunakan acara mouse Dalam fungsi panggil balik acara mouse, anda boleh mendapatkan masa apabila peristiwa semasa berlaku. Atribut yang sepadan untuk kedudukan elemen ialah MouseEvent dan clientX dalam clientY Kami akan mengemas kini kedudukan elemen dalam masa nyata dengan membaca kedua-dua atribut ini kemudian. Adalah disyorkan untuk menggunakan pelaksanaan

untuk mengalihkan elemen transformtranslate Berbanding dengan mengubah suai atribut top dan left elemen, ia tidak akan menyebabkan perubahan pada elemen. susun atur, mengelakkan pengaliran semula dan Kesan prestasi lukisan semula.

PS: Ada artikel tentang penggunaan dan pengalaman terjemah dalam MDN, anda boleh merasainya.

Tentukan tiga set koordinat

masing-masing tentukan set koordinat (originalPosition) yang digunakan untuk merekodkan kedudukan awal elemen dan kedudukan penunjuk pada elemen apabila elemen ditekan koordinat (mousedownOffset) dan set koordinat (elementPosition) yang dikemas kini dalam masa nyata semasa elemen bergerak.

Rekodkan koordinat kedudukan awal elemen Asal terletak di penjuru kiri sebelah atas halaman Ia digunakan untuk memulihkan kedudukan elemen yang diseret selepas pemulaan dan penyeretan tidak berubah:

const originalPosition = reactive({
  x: 10,
  y: 10,
})

Koordinat penuding pada elemen apabila elemen ditekan Asal terletak di sudut kiri atas elemen yang diseret. Ia diperolehi oleh koordinat penunjuk apabila ditekan - kedudukan mengimbangi awal elemen:

const mousedownOffset = reactive({
  x: 0,
  y: 0,
})

elemen Koordinat dikemas kini dalam masa nyata semasa bergerak Asal terletak di sudut kiri atas halaman originalPosition. Apabila peristiwa mousemove berlaku, koordinat masa nyata penuding - mousedownOffset diperoleh:

const elementPosition = reactive({
  x: 0,
  y: 0,
})

PS: Apabila asal ialah penjuru kiri sebelah atas halaman, titik 1 dalam gambar mewakili originalPosition atau elementPosition, titik 2 mewakili koordinat apabila penunjuk ditekan, apabila titik asal ialah titik 1 Klik pada titik 2 dalam rajah untuk menunjukkan mousedownOffset;

Daftar acara turun tetikus

Apabila melaksanakan penyeretan elemen, hanya elemen yang diseret sahaja perlu Tambah acara mousedown acara selepas menggunakannya Anda mesti membangunkan tabiat muncul secara berpasangan.

Jika anda menambah kedua-dua mousemove dan mouseup pada elemen yang diseret, anda akan mendapati sesuatu di luar kawalan berlaku.

Selepas halaman dimuatkan, mula-mula tetapkan semula kedudukan lalai elemen yang diseret dan tambahkan acara mousedown Selepas komponen dipunggah, padamkan acara mousedown:

const restore = () => {
  elementPosition.x = originalPosition.x;
  elementPosition.y = originalPosition.y;
}

onMounted(() => {
  restore();
  floatButton.value.addEventListener('mousedown', onMousedown, true);
})

onUnmounted(() => {
  floatButton.value.removeEventListener('mousedown', onMousedown, true);
})

實現(xiàn)拖拽的核心

選擇 Vuejs 的原因就是因為其是 MVVM 型框架，我們關(guān)注點在聲明上，內(nèi)部的運(yùn)轉(zhuǎn)機(jī)制有框架負(fù)責(zé)，所以在下面的事件處理上就只需要在對應(yīng)的事件中去更新一開始聲明的三組坐標(biāo)就可以了。

在 onMousedown 時，通過指針?biāo)诘淖鴺?biāo) - 被拖拽元素初始位置的坐標(biāo)得到指針此時在被拖拽元素上的坐標(biāo)，onMousedown 時要為 document 添加 mousemove 和 mouseup 事件：

const onMousedown = (event: MouseEvent) => {
  event.stopPropagation();
  
  mousedownOffset.x = event.clientX - originalPosition.x;
  mousedownOffset.y = event.clientY - originalPosition.y;
  
  document.addEventListener('mousemove', onMousemove, true);
  document.addEventListener('mouseup', onMouseup, true);
}

在 onMousemove時，通過指針?biāo)诘淖鴺?biāo) - 指針在被拖拽元素上的位置得到被拖拽元素左上角距離頁面左上角的距離，并更新到 elementPosition：

const onMousemove = (event: MouseEvent) => {
  event.stopPropagation();
  
  elementPosition.x = event.clientX - mousedownOffset.x;
  elementPosition.y = event.clientY - mousedownOffset.y;
}

在 onMouseup時，主要做的就是為 document 移除在 onMousemove 時注冊的兩個事件，要注意的是移除的事件要是同一個事件，也就是引用一致的事件，推薦將對應(yīng)的處理事件賦值給一個變量使用，最后可以在拖拽結(jié)束后還原被拖拽元素的位置：

const onMouseup = (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener('mousemove', onMousemove, true);
  document.removeEventListener('mouseup', onMouseup, true);
  restore();
}

補(bǔ)充其它部分代碼和演示

<div 
 ref="floatButton"
 class="float-button"
 :style="{
    &#39;transition-duration&#39;: &#39;0.1s&#39;,
    transform: `translate(${elementPosition.x}px, ${elementPosition.y}px)`
  }">
</div>

.float-button {
  position: absolute;
  width: 42px;
  height: 42px;
  background: red;
  border-radius: 5px;
  user-select: none;
  background-image: url(../assets/taobao.svg);
  background-size: cover;
}

總結(jié)

使用 mousemove、translate 在 Vue3 中實現(xiàn)可以隨意拖拽的 Icon 的案例就完成了，在本次案例中需要認(rèn)真思考對應(yīng)的幾個坐標(biāo)和移動時坐標(biāo)如何更新，事件的使用要成對出現(xiàn)，如何在這個拖拽的 Icon 上增加點擊事件時還需要多做一些處理，有答案的朋友可以留下你的想法~

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menggunakan Vue3 untuk melaksanakan fungsi menyeret elemen elegan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!