javascript melaksanakan sticky

Dalam pembangunan bahagian hadapan, kami sering menghadapi keperluan untuk melaksanakan beberapa kesan khas, seperti seret dan lepas, tetingkap timbul, dsb. Antaranya, kesan melekit juga merupakan kesan yang sangat menarik dan praktikal. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan melekit.

1. Pengenalan kepada kesan melekit

Kesan melekit merujuk kepada kesan apabila elemen diseret, elemen itu dipatuhi pada elemen tertentu dan boleh bergerak bebas dalam elemen yang ditentukan. . Kesan ini sangat meluas dalam senario aplikasi, seperti menyeret muat naik fail, teka-teki jigsaw, dsb.

2. Langkah untuk mencapai kesan melekit

1. Buat elemen boleh seret

Pertama, kita perlu mencipta elemen boleh seret. Semasa proses pelaksanaan, ia boleh dilengkapkan menggunakan HTML, CSS dan JavaScript. Contohnya, kod berikut:

<div id="drag" class="drag">Drag me!</div>

.drag {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  cursor: move;
}

var drag = document.getElementById("drag");

var posX = 0;
var posY = 0;
var elemX = 0;
var elemY = 0;

drag.onmousedown = function(e) {
  e.preventDefault();

  posX = e.clientX;
  posY = e.clientY;

  elemX = drag.offsetLeft;
  elemY = drag.offsetTop;

  document.onmousemove = dragElement;
  document.onmouseup = stopDragging;
}

function dragElement(e) {
  e.preventDefault();

  var newX = elemX + e.clientX - posX;
  var newY = elemY + e.clientY - posY;

  drag.style.left = newX + "px";
  drag.style.top = newY + "px";
}

function stopDragging() {
  document.onmousemove = null;
  document.onmouseup = null;
}

Dalam kod di atas, kami mencipta elemen div dengan kelas "seret" dan menetapkan gaya padanya. Seterusnya, kami menambah acara turun tetikus, gerakan tetikus dan tetikus ke atas elemen melalui JavaScript untuk mencapai kesan seretan.

2. Buat elemen yang ditentukan

Kita perlu mencipta elemen tertentu, iaitu sasaran yang boleh dilekat. Dalam contoh ini, kami menggunakan elemen div dengan kelas "drop" sebagai elemen yang ditetapkan. Contohnya, kod berikut:

<div id="drop" class="drop">Drop me here!</div>

.drop {
  position: absolute;
  top: 300px;
  left: 300px;
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
}

3. Mencapai kesan melekit

Apabila elemen yang diseret dilepaskan dalam elemen yang ditentukan, kita perlu mematuhi elemen pada elemen yang ditentukan di atas dan bergerak bebas dalam elemen. Berikut ialah kod pelaksanaan:

var drop = document.getElementById("drop");

drag.onmouseup = function(e) {
  var rect = drop.getBoundingClientRect();

  if (elemX >= rect.left && elemX <= rect.right && elemY >= rect.top && elemY <= rect.bottom) {
    drop.appendChild(drag);
    drag.style.position = "relative";
    drag.style.left = "0";
    drag.style.top = "0";
  }
}

Dalam kod di atas, kami memperoleh kawasan segi empat tepat elemen yang ditentukan melalui kaedah getBoundingClientRect(). Kemudian, dalam acara naik tetikus, tentukan sama ada kedudukan elemen yang diseret berada dalam kawasan segi empat tepat. Jika ia berada dalam kawasan ini, tambahkan elemen seret pada elemen yang ditentukan dan tetapkan kedudukannya kepada relatif supaya ia boleh bergerak bebas dalam elemen yang ditentukan.

3. Pengoptimuman kesan melekit

Kod di atas sudah boleh mencapai kesan melekit asas, tetapi masih terdapat beberapa butiran yang perlu diberi perhatian untuk meningkatkan kelancaran dan kebolehpercayaan kesannya.

1. Tetikus elemen seret mengikuti

Apabila menyeret elemen, untuk meningkatkan pengalaman pengguna, kami boleh menentukan kedudukan tetikus di tengah-tengah elemen yang diseret. Berikut ialah kod pelaksanaan:

drag.onmousemove = function(e) {
  drag.style.cursor = "move";

  var posX = e.clientX - drag.offsetWidth / 2;
  var posY = e.clientY - drag.offsetHeight / 2;

  drag.style.left = posX + "px";
  drag.style.top = posY + "px";
}

2. Lepaskan kunci elemen yang diseret

Dalam kod pelaksanaan, kami menggunakan document.onmousemove dan document.onmouseup untuk mencapai kesan seretan. Walau bagaimanapun, apabila elemen yang diseret bergerak di luar elemen induknya, peristiwa pergerakan tetikus dan tetikus masih akan dicetuskan, menyebabkan elemen yang diseret tidak dapat dilepaskan. Untuk menyelesaikan masalah ini, kita perlu mengunci elemen yang diseret dalam acara mousedown dan melepaskannya dalam acara mouseup. Berikut ialah kod pelaksanaan:

var isDragging = false;

drag.onmousedown = function(e) {
  e.preventDefault();

  isDragging = true;

  posX = e.clientX;
  posY = e.clientY;

  elemX = drag.offsetLeft;
  elemY = drag.offsetTop;

  document.onmousemove = dragElement;
  document.onmouseup = stopDragging;
}

function stopDragging(e) {
  isDragging = false;

  document.onmousemove = null;
  document.onmouseup = null;
}

document.onmousemove = function(e) {
  if (isDragging) {
    var posX = e.clientX - drag.offsetWidth / 2;
    var posY = e.clientY - drag.offsetHeight / 2;

    drag.style.left = posX + "px";
    drag.style.top = posY + "px";
  }
}

3. Had sempadan elemen melekat

Tingkah laku yang tidak dijangka akan berlaku apabila elemen yang diseret bergerak di luar elemen yang ditentukan. Oleh itu, kita perlu menambah kekangan sempadan kepada kesan melekit. Berikut ialah kod pelaksanaan:

drag.onmouseup = function(e) {
  var rect = drop.getBoundingClientRect();

  if (elemX >= rect.left && elemX <= rect.right && elemY >= rect.top && elemY <= rect.bottom) {
    drop.appendChild(drag);
    drag.style.position = "relative";
    drag.style.left = "0";
    drag.style.top = "0";
  } else {
    drag.style.top = Math.max(0, Math.min(drop.offsetHeight - drag.offsetHeight, e.clientY - rect.top - drag.offsetHeight / 2)) + "px";
    drag.style.left = Math.max(0, Math.min(drop.offsetWidth - drag.offsetWidth, e.clientX - rect.left - drag.offsetWidth / 2)) + "px";
  }
}

Dalam kod di atas, kami mengehadkan sempadan elemen yang diseret dengan menggunakan kaedah Math.max dan Math.min. Dengan cara ini, elemen yang diseret tidak boleh bergerak di luar sempadan elemen yang ditentukan.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan JavaScript untuk mencapai kesan melekit dan menghuraikan pengoptimuman semasa proses pelaksanaan. Dalam senario sebenar, kesan melekit sangat berguna, dan kaedah yang diterangkan dalam artikel ini juga boleh digunakan untuk senario aplikasi lain. Walaupun kesan melekit kelihatan mudah, masih terdapat banyak butiran yang terlibat, dan pelaksana perlu memberi perhatian lebih.

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