Seret dan Lepaskan dalam HTML5

Dalam siaran ini, kita akan melihat cara melaksanakan fungsi seret dan lepas dalam penyemak imbas menggunakan antara muka seret dan lepas asli dalam HTML5.

Ideanya mudah sahaja:

• Sesuaikan elemen untuk menjadikannya boleh diseret
• Benarkan menjatuhkan elemen boleh seret dalam kawasan boleh jatuh.

Nyatakan dua kotak

<div className="flex gap-8">
  <div
    id="box1"
    className="w-[300px] h-[300px] border border-black flex items-center justify-center"
  />
  <div
    id="box2"
    className="w-[300px] h-[300px] border border-black flex items-center justify-center"
  />
</div>

Dua kotak ini akan berfungsi sebagai "zon jatuh" kami. Pengguna akan dapat menyeret item dari satu kotak dan menjatuhkannya ke kotak yang lain.

Tambah div yang kita mahu buat sebagai boleh diseret di dalam "box1"

  <div
    id="box1"
    className="w-[300px] h-[300px] border border-black flex items-center justify-center"
  />
    <div
      id="draggable1"
      className="w-[50px] h-[50px] bg-red-500 cursor-move"
    />
  </div>

Petak merah ini akan menjadi item yang boleh diseret antara kotak.

Menjadikan Elemen Boleh Diseret

Untuk menjadikan elemen boleh seret, kita perlu menambahkan atribut boleh seret padanya dan mengendalikan acara mula seret.
Acara dragstart akan dicetuskan apabila pengguna mula menyeret item. Begini cara kami boleh melaksanakannya:

const handleOnDragStart = (event) => {
  event.dataTransfer.setData("text/plain", event.target.id);
};

Dalam fungsi ini, kami menggunakan event.dataTransfer.setData() untuk menyimpan ID elemen yang diseret. ID ini kemudiannya akan membantu kami mengenal pasti elemen yang telah diseret dan di mana ia perlu digugurkan.

Seterusnya, kemas kini div draggable1 untuk menjadikannya boleh draggable dan tambah pengendali acara onDragStart:

<div
  id="draggable1"
  className="w-[50px] h-[50px] bg-red-500 cursor-move"
  draggable="true"
  onDragStart="{handleOnDragStart}"
/>

Menggugurkan Unsur

const handleOnDrop = (event) => {
  event.preventDefault();
  const data = event.dataTransfer.getData("text/plain");
  event.target.appendChild(document.getElementById(data));
};

const handleDragOver = (event) => {
  event.preventDefault();
};

• Fungsi handleOnDrop menghalang kelakuan lalai (yang penting untuk membenarkan penurunan), mendapatkan semula ID elemen yang diseret daripada event.dataTransfer dan menambahkan elemen yang diseret pada sasaran jatuh.
• Fungsi handleDragOver memastikan elemen yang diseret boleh digugurkan dengan menghalang kelakuan lalai.

Akhir sekali, gunakan pengendali acara ini pada kotak:

<div
  id="box1"
  onDrop="{handleOnDrop}"
  onDragOver="{handleDragOver}"
  className="w-[300px] h-[300px] border border-black flex items-center justify-center"
>
  <div
    id="draggable1"
    className="w-[50px] h-[50px] bg-red-500 cursor-move"
    draggable="true"
    onDragStart="{handleOnDragStart}"
  />
</div>

<div
  id="box2"
  onDrop="{handleOnDrop}"
  onDragOver="{handleDragOver}"
  className="w-[300px] h-[300px] border border-black flex items-center justify-center"
/>

Anda boleh menambah isyarat visual untuk diserlahkan apabila operasi seret sedang dijalankan. Kami akan mengurangkan kelegapan komponen.
Ini boleh dilakukan dengan menjejak apabila operasi seret dilakukan dalam pembolehubah keadaan dan menukar kelegapan.
Beginilah rupa komponen tindak balas anda

<p>import { useState } from "react";</p>

<p>const SimpleDragDrop = () => {<br>
  const [isDragging, setIsDragging] = useState(false);</p>

<p>const handleOnDragStart = (event) => {<br>
    setIsDragging(true);<br>
    event.dataTransfer.setData("text/plain", event.target.id);<br>
  };</p>

<p>const handleOnDrop = (event) => {<br>
    event.preventDefault();<br>
    setIsDragging(false);<br>
    const data = event.dataTransfer.getData("text/plain");<br>
    event.target.appendChild(document.getElementById(data));<br>
  };</p>

<p>const handleDragOver = (event) => {<br>
    event.preventDefault();<br>
  };</p>

<p>return (<br>
    <div className="flex gap-8"><br>
      <div<br>
        id="box1"<br>
        onDrop={handleOnDrop}<br>
        onDragOver={handleDragOver}<br>
        className="flex h-[300px] w-[300px] items-center justify-center border border-main"<br>
      ><br>
        <div<br>
          id="draggable1"<br>
          className={h-[50px] w-[50px] cursor-move bg-red-500 </span><span class="p">${</span><span class="nx">isDragging</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">opacity-50</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">opacity-100</span><span class="dl">"</span><span class="p">}</span><span class="s2">}<br>
          draggable={true}<br>
          onDragStart={handleOnDragStart}<br>
        /><br>
      </div><br>
      <div<br>
        id="box2"<br>
        onDrop={handleOnDrop}<br>
        onDragOver={handleDragOver}<br>
        className="flex h-[300px] w-[300px] items-center justify-center border border-main"<br>
      /><br>
    </div><br>
  );<br>
};</p>

<p>export default SimpleDragDrop;</p>

Demo

Demo Langsung

Contoh ini menunjukkan betapa mudahnya untuk melaksanakan fungsi drag-and-drop dengan hanya beberapa baris kod. Jangan ragu untuk mengembangkannya dengan menambahkan lebih banyak sasaran seret dan lepas atau menyesuaikan penampilan dan gelagat elemen dengan lebih lanjut!

Baca lagi

• API Seret dan Lepas HTML
• API Seret dan Lepas HTML5

Catatan Asal

Atas ialah kandungan terperinci Seret dan Lepaskan dalam HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!