Seret dan Lepaskan dalam HTML5-tutorial js-php.cn

Seret dan Lepaskan dalam HTML5

Mary-Kate Olsen

Lepaskan： 2024-10-06 06:18:02

asal

390 orang telah melayarinya

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.

Drag and Drop in HTML5

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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);
};

Salin selepas log masuk

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}"
/>

Salin selepas log masuk

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();
};

Salin selepas log masuk

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"
/>

Salin selepas log masuk

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>

Salin selepas log masuk

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!