实现点击按钮让Div跟随光标，点击另一按钮停止并返回初始位置

Got it, let's build a clean, working implementation for this requirement. Here's the full code breakdown:

1. HTML Structure #

First, we'll set up the buttons and movable div, plus store the div's initial position in data-* attributes for easy resetting:

<button id="takeMeBtn">Take Me (Follow Cursor)</button>
<button id="letGoBtn">Let Go (Reset Position)</button>

<div id="movingbox" data-init-top="100px" data-init-left="200px">
  I'm the moving box!
</div>

2. Basic CSS #

Style the div to make it visible and set its initial position:

#movingbox {
  width: 100px;
  height: 100px;
  background: #4285F4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 100px; /* Matches data-init-top */
  left: 200px; /* Matches data-init-left */
  border-radius: 8px;
}

button {
  margin: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

3. JavaScript Logic #

This is where we handle the cursor follow and reset functionality. We'll add/remove event listeners and manage the div's position:

const bx = document.getElementById("movingbox");
const takeMeBtn = document.getElementById('takeMeBtn');
const letGoBtn = document.getElementById('letGoBtn');

// Store initial position from data attributes
const initialPosition = {
  top: bx.dataset.initTop,
  left: bx.dataset.initLeft
};

// Function to update box position on mouse move
function handleMouseMove(e) {
  // Subtract 50px to center the box on the cursor (since box is 100x100)
  bx.style.left = `${e.clientX - 50}px`;
  bx.style.top = `${e.clientY - 50}px`;
  bx.style.zIndex = "10"; // Ensure box stays above other content
}

// Handle "Take Me" button click: start following cursor
takeMeBtn.addEventListener('click', (event) => {
  // Move the box to current cursor position immediately
  const cursorX = event.clientX;
  const cursorY = event.clientY;
  bx.style.left = `${cursorX - 50}px`;
  bx.style.top = `${cursorY - 50}px`;
  // Add mouse move listener to keep following
  document.addEventListener('mousemove', handleMouseMove);
});

// Handle "Let Go" button click: stop following and reset position
letGoBtn.addEventListener('click', () => {
  // Remove the mouse move listener
  document.removeEventListener('mousemove', handleMouseMove);
  // Reset box to initial position
  bx.style.top = initialPosition.top;
  bx.style.left = initialPosition.left;
  bx.style.zIndex = "1"; // Reset z-index if needed
});

Key Notes: #

• Initial Position Storage: Using data-* attributes makes it easy to update the initial position without touching JavaScript—just adjust the HTML/CSS values.
• Cursor Centering: The -50px adjustment ensures the cursor sits in the middle of the 100x100px box; tweak this value if your box has a different size.
• Event Listener Management: We add the mousemove listener to the document so the box follows the cursor anywhere on the page, and remove it when we want to stop.
• Z-Index: Setting a higher z-index when following ensures the box doesn't get hidden behind other elements.

内容的提问来源于stack exchange，提问作者kajate