Javascript implementiert Sticky

Bei der Front-End-Entwicklung müssen wir häufig Spezialeffekte wie Drag & Drop, Popup-Fenster usw. implementieren. Unter diesen ist auch der Klebeeffekt ein sehr interessanter und praktischer Effekt. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript einen Sticky-Effekt erzielen.

1. Einführung in den Sticky-Effekt

Der Sticky-Effekt bezieht sich auf den Effekt, dass beim Ziehen eines Elements das Element an einem angegebenen Element haftet und sich innerhalb des angegebenen Elements frei bewegen kann. Dieser Effekt ist in Anwendungsszenarien wie dem Ziehen von Datei-Uploads, Puzzles usw. sehr verbreitet.

2. Schritte zum Erzielen des Sticky-Effekts

1. Erstellen eines ziehbaren Elements

Zuerst müssen wir ein ziehbares Element erstellen. Während des Implementierungsprozesses kann dieser mit HTML, CSS und JavaScript abgeschlossen werden. Zum Beispiel der folgende Code:

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

Im obigen Code haben wir ein div-Element mit der Klasse „drag“ erstellt und ihm einen Stil zugewiesen. Als Nächstes fügten wir dem Element über JavaScript die Ereignisse „Mousedown“, „MouseMove“ und „MouseUp“ hinzu, um den Zieheffekt zu erzielen.

2. Erstellen Sie ein bestimmtes Element.

Wir müssen ein bestimmtes Element erstellen, das ein aufklebbares Ziel ist. In diesem Beispiel verwenden wir ein div-Element mit der Klasse „drop“ als designiertes Element. Zum Beispiel der folgende Code:

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

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

3. Klebeeffekt erzielen

Wenn das gezogene Element innerhalb des angegebenen Elements freigegeben wird, müssen wir das Element am angegebenen Element anhaften und uns innerhalb des Elements frei bewegen. Das Folgende ist der Implementierungscode:

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

Im obigen Code erhalten wir die rechteckige Fläche des angegebenen Elements über die Methode getBoundingClientRect(). Bestimmen Sie dann im Mouseup-Ereignis, ob die Position des gezogenen Elements innerhalb des rechteckigen Bereichs liegt. Wenn es sich innerhalb dieses Bereichs befindet, fügen Sie das Drag-Element zum angegebenen Element hinzu und legen Sie seine Position auf „relativ“ fest, damit es sich innerhalb des angegebenen Elements frei bewegen kann.

3. Optimierung des Klebeeffekts

Der obige Code kann bereits den grundlegenden Klebeeffekt erzielen, es müssen jedoch noch einige Details beachtet werden, um die Glätte und Zuverlässigkeit des Effekts zu verbessern.

1. Element mit der Maus ziehen

Um das Benutzererlebnis zu verbessern, können wir beim Ziehen eines Elements die Position der Maus in der Mitte des gezogenen Elements festlegen. Das Folgende ist der Implementierungscode:

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. Gib die Sperre des gezogenen Elements frei

Im Implementierungscode verwenden wir document.onmousemove und document.onmouseup, um den Zieheffekt zu erzielen. Wenn sich das gezogene Element jedoch außerhalb seines übergeordneten Elements bewegt, werden die Ereignisse „Mousemove“ und „Mouseup“ weiterhin ausgelöst, was dazu führt, dass das gezogene Element nicht freigegeben werden kann. Um dieses Problem zu lösen, müssen wir das gezogene Element im Mousedown-Ereignis sperren und im Mouseup-Ereignis freigeben. Das Folgende ist der Implementierungscode:

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. Grenzgrenze für klebrige Elemente

Unerwartetes Verhalten tritt auf, wenn sich das gezogene Element außerhalb des angegebenen Elements bewegt. Daher müssen wir dem Sticky-Effekt Grenzbeschränkungen hinzufügen. Das Folgende ist der Implementierungscode:

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

Im obigen Code begrenzen wir die Grenzen des gezogenen Elements mithilfe der Methoden Math.max und Math.min. Auf diese Weise kann sich das gezogene Element nicht über die Grenzen des angegebenen Elements hinaus bewegen.

4. Zusammenfassung

In diesem Artikel wird die Verwendung von JavaScript zur Erzielung des Sticky-Effekts vorgestellt und die Optimierung während des Implementierungsprozesses erläutert. In tatsächlichen Szenarien ist der Sticky-Effekt sehr nützlich, und die in diesem Artikel beschriebene Methode ist auch auf andere Anwendungsszenarien anwendbar. Obwohl der Sticky-Effekt einfach erscheint, sind dennoch viele Details erforderlich, und der Implementierer muss mehr Aufmerksamkeit schenken.

Das obige ist der detaillierte Inhalt vonJavascript implementiert Sticky. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!