SEGERA APA...

Mengapa Menjadikan Elemen Boleh Diseret?
Elemen boleh seret boleh meningkatkan kebolehgunaan dengan ketara dalam pelbagai aplikasi, seperti:

1. Papan pemuka: Pengguna boleh menyusun semula widget mengikut pilihan mereka.
2. Galeri Imej: Pengguna boleh meletakkan semula imej untuk reka letak yang lebih baik.
3. Papan Tugas: Pengguna boleh menyeret dan melepaskan tugasan antara lajur yang berbeza.

Melaksanakan Elemen Boleh Seret

Jom selami kod! Di bawah ialah fungsi JavaScript yang menjadikan elemen HTML boleh diseret. Fungsi ini membolehkan anda menentukan elemen pemegang yang memulakan tindakan menyeret, memberikan pengalaman pengguna yang lebih terkawal.

`function makeElementDraggable(selector: string, handleSelector?: string): void {
const draggableElements: HTMLElement[] = selector.startsWith("#")
? [document.getElementById(selector.slice(1)) sebagai HTMLElement]
: Array.from(document.getElementsByClassName(selector.slice(1)) sebagai HTMLCollectionOf);

draggableElements.forEach((draggable) => {
  if (!draggable) return;

  const handleElement = handleSelector ? draggable.querySelector(handleSelector) as HTMLElement : draggable;
  if (!handleElement) return;

  let isMouseDown = false;
  let initX = 0, initY = 0, offsetX = 0, offsetY = 0;

  function mouseDown(e: MouseEvent): void {
    isMouseDown = true;
    handleElement.style.cursor = "default";
    offsetX = draggable.offsetLeft;
    offsetY = draggable.offsetTop;
    initX = e.clientX - offsetX;
    initY = e.clientY - offsetY;
    document.addEventListener("mousemove", mouseMove);
    document.addEventListener("mouseup", mouseUp);
  }

  function mouseMove(e: MouseEvent): void {
    if (!isMouseDown) return;
    const x = e.clientX - initX;
    const y = e.clientY - initY;
    draggable.style.setProperty("left", `${x}px`, "important");
    draggable.style.setProperty("top", `${y}px`, "important");
    draggable.style.position = "fixed"; 
  }

  function mouseUp(): void {
    isMouseDown = false;
    handleElement.style.cursor = "move";
    document.removeEventListener("mousemove", mouseMove);
    document.removeEventListener("mouseup", mouseUp);
  }

  handleElement.style.cursor = "move";
  handleElement.addEventListener("mousedown", mouseDown);
});

}`

Cara Ia Berfungsi

1. Memilih Elemen: Fungsi ini menerima pemilih CSS untuk mengenal pasti elemen yang anda mahu jadikan boleh diseret. Anda boleh menentukan sama ada ID (menggunakan #) atau kelas (menggunakan .). Parameter kedua pilihan membolehkan anda menentukan elemen pemegang yang akan memulakan penyeretan.

2. Acara Tetikus:

• turun tetikus: Apabila pengguna menekan butang tetikus ke bawah pada pemegang, kami mula menjejaki pergerakan.
• mouseemove: Semasa pengguna menggerakkan tetikus sambil menahan butang, kami mengemas kini kedudukan elemen boleh seret berdasarkan kedudukan tetikus semasa.
• mouseup: Apabila pengguna melepaskan butang tetikus, kami berhenti menjejaki pergerakan.

1. Kedudukan: Kedudukan elemen boleh seret ditetapkan menggunakan sifat CSS (kiri dan atas). Kedudukan ditetapkan kepada tetap, membolehkannya diletakkan di mana-mana pada port pandangan.

Untuk menggunakan ini secara langsung :-
makeElementDraggable('#myDraggableElement', '.handle');

Dalam contoh ini, #myDraggableElement akan dijadikan boleh diseret menggunakan .handle sebagai pemegang seret.
Kesimpulan
Melaksanakan elemen boleh seret dalam aplikasi web anda boleh meningkatkan interaktiviti dan kepuasan pengguna dengan sangat baik. Coretan kod yang disediakan menawarkan cara yang mudah untuk mencapai ini dengan persediaan yang minimum. Cuba dalam projek anda dan lihat cara ia meningkatkan antara muka pengguna anda!

Anda juga boleh melakukan perkara yang sama dalam bertindak balas, buat beberapa cangkuk tersuai seperti useDraggable yang akan melakukan perkara yang sama.
Terima kasih, BYEEE

Atas ialah kandungan terperinci SEGERA APA.... Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!