Cara untuk menambah fungsi seret dan drop ke laman web adalah dengan menggunakan API Drag dan Drop HTML5, yang disokong secara asli tanpa perpustakaan tambahan. Langkah -langkah khusus adalah seperti berikut: 1. Tetapkan elemen draggable = "benar" untuk membolehkan seretan; 2. Dengarkan Dragstart, Dragover, Drop dan Dragend peristiwa; 3. Tetapkan data dalam Dragstart, menghalang tingkah laku lalai dalam Dragover, dan mengendalikan logik dalam penurunan. Di samping itu, pergerakan elemen dapat dicapai melalui appendchild dan memuat naik fail dapat dicapai melalui e.datatransfer.files. Nota: PencegahanDefault () mesti dipanggil untuk mencetuskan kejatuhan. Sisi mudah alih menyokong buruk. Adalah disyorkan untuk menggunakan perpustakaan pihak ketiga untuk menyusun kompleks.

Sebenarnya tidak sukar untuk menambah fungsi seret dan drop ke laman web, dan ia dapat dicapai dengan menggunakan API Drag dan Drop HTML5. Ia disokong secara asli dan tidak memerlukan pengenalan perpustakaan tambahan. Ia sesuai untuk interaksi seperti muat naik fail dan penyortiran elemen.

Penyediaan: Tetapkan elemen draggable

Untuk membuat elemen diseret, pertama tambah atribut draggable="true" kepadanya. Sebagai contoh, <div> atau imej tidak boleh diseret secara lalai, tetapi peristiwa seretan boleh dicetuskan selepas menambah harta ini. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165462390139.jpeg" class="lazy" alt="Menambah fungsi seret dan drop menggunakan API seret dan drop HTML5."><pre class='brush:php;toolbar:false;'> &lt;div draggable = &quot;true&quot;&gt; seret saya untuk mencuba &lt;/div&gt;</pre><p> Kemudian anda perlu mendengar beberapa acara utama: <code>dragstart , dragover , drop dan dragend . Peristiwa -peristiwa ini sesuai dengan tindakan yang menyeret permulaan, menyeret ke kawasan sasaran, melepaskan tetikus, dan mengheret hujung.

Proses asas menyeret dan menjatuhkan

Operasi seretan dan drop terutamanya dibahagikan kepada tiga langkah:

• Mula menyeret : Tetapkan data seret dan kesan dalam acara dragstart .
• Seret ke kawasan sasaran : Blok tingkah laku lalai di dragover , sebaliknya drop tidak boleh dicetuskan.
• Penempatan Percuma : Proses data dalam logik drop dan lengkap.

Sebagai contoh, anda ingin menyeret kotak ke kawasan lain:

 const Dragel = document.QuerySelector ('#drag');
const dropZone = document.QuerySelector ('#drop-zon');

Dragel.AddeventListener ('Dragstart', (e) => {
  e.datatransfer.setData ('teks/kosong', 'ini diseret data');
});

dropZone.addeventListener ('Dragover', (e) => {
  E.PreventDefault (); // Tingkah laku lalai mesti disekat untuk mencetuskan penurunan
});

dropZone.addeventListener ('drop', (e) => {
  const data = e.datatransfer.getData ('Text/Plain');
  console.log ('Data yang diterima:', data);
});

Ini melengkapkan interaksi seret dan drop yang paling asas.

Seret dan drop lanjutan: Pindahkan elemen atau muat naik fail

Sebagai tambahan kepada data teks lulus, anda juga boleh menggunakan seret dan lepaskan untuk memindahkan elemen DOM atau memuat naik fail.

Sebagai contoh, jika anda ingin menyeret elemen dari satu bekas ke yang lain, anda boleh menambahkan nod ke lokasi baru semasa drop :

 dropZone.addeventListener ('drop', (e) => {
  const id = e.datatransfer.getData ('Text/Plain');
  const draggedel = document.getElementById (id);
  DropZone.AppendChild (Draggedel);
});

Jika ia adalah senario muat naik fail, seperti menyeret imej tempatan ke halaman, anda boleh mendapatkan senarai fail melalui e.dataTransfer.files :

 dropZone.addeventListener ('drop', (e) => {
  const files = e.datatransfer.files;
  untuk (biarkan fail fail) {
    jika (file.type.startswith ('image/')) {
      const reader = fileReader baru ();
      reader.onload = () => {
        const img = document.createeLement ('img');
        img.src = reader.result;
        DropZone.AppendChild (IMG);
      };
      reader.readAsDataurl (fail);
    }
  }
});

Bahagian kod ini boleh dipratonton secara langsung selepas menyeret imej.

Nota dan Soalan Lazim

Beberapa butiran mudah diabaikan apabila menggunakan API seret dan drop HTML5:

• dragover mesti memanggil preventDefault() , sebaliknya drop tidak akan dicetuskan
• Pelayar yang berbeza mungkin mempunyai sokongan yang berbeza untuk gaya seret dan drop, seperti seret dan kursor.
• Sokongan mudah alih untuk seret dan drop asli tidak begitu baik, dan acara sentuhan tambahan diperlukan
• Jika anda ingin melakukan penyortiran seret dan drop yang kompleks, anda boleh mempertimbangkan menggabungkan perpustakaan pihak ketiga (seperti sortablejs)

Pada dasarnya semua itu. Walaupun fungsi seret dan drop HTML5 adalah mudah, ia juga boleh menghasilkan kesan interaksi yang baik selepas digunakan.