javascript implements sticky

In front-end development, we often encounter the need to implement some special effects, such as drag and drop, pop-up windows, etc. Among them, the sticky effect is also a very interesting and practical effect. This article will introduce how to use JavaScript to achieve a sticky effect.

1. Introduction to the sticky effect

The sticky effect refers to the effect that when an element is dragged, the element is adhered to a specified element and can move freely within the specified element. . This effect is very widespread in application scenarios, such as dragging file uploads, jigsaw puzzles, etc.

2. Steps to achieve the sticky effect

1. Create a draggable element

First, we need to create a draggable element. During the implementation process, it can be completed using HTML, CSS and JavaScript. For example, the following 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;
}

In the above code, we created a div element with class "drag" and assigned a style to it. Next, we added mousedown, mousemove, and mouseup events to the element through JavaScript to achieve the dragging effect.

2. Create a specified element

We need to create a specified element, which is a stickable target. In this example, we use a div element with class "drop" as the designated element. For example, the following 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. Realizing the sticky effect

When the dragged element is released within the specified element, we need to adhere the element to the specified element above and move freely within the element. The following is the implementation code:

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

In the above code, we obtain the rectangular area of ​​the specified element through the getBoundingClientRect() method. Then, in the mouseup event, determine whether the position of the dragged element is within the rectangular area. If it is within this area, add the drag element to the specified element and set its position to relative so that it can move freely within the specified element.

3. Optimization of the sticky effect

The above code can already achieve the basic sticky effect, but there are still some details that need to be paid attention to to improve the smoothness and reliability of the effect.

1. Drag element mouse follows

When dragging an element, in order to improve the user experience, we can specify the position of the mouse at the center of the dragged element. The following is the implementation code:

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. Release the lock of the dragged element

In the implementation code, we use document.onmousemove and document.onmouseup to achieve the drag effect . However, when the dragged element moves outside its parent element, the mousemove and mouseup events will still be triggered, causing the dragged element to be unable to be released. To solve this problem, we need to lock the dragged element in the mousedown event and release it in the mouseup event. The following is the implementation code:

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. sticky element boundary limit

Unexpected behavior occurs when the dragged element moves outside the specified element. Therefore, we need to add boundary constraints to the sticky effect. The following is the implementation code:

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

In the above code, we limit the boundaries of the dragged element by using the Math.max and Math.min methods. This way, the dragged element cannot move outside the bounds of the specified element.

4. Summary

This article introduces how to use JavaScript to achieve the sticky effect, and elaborates on the optimization during the implementation process. In actual scenarios, the sticky effect is very useful, and the method described in this article is also applicable to other application scenarios. Although the sticky effect seems simple, there are still many details involved, and the implementer needs to pay more attention.

The above is the detailed content of javascript implements sticky. For more information, please follow other related articles on the PHP Chinese website!