JS实现点击按钮创建可接收拖拽元素的盒子问题求助

Hey there! Let's break down why those boxes you create with the button aren't accepting dragged text, and fix it right up.

The Root Cause #

Your original drag-and-drop event listeners (like dragover and drop) are only attached to the boxes that existed when the page first loaded. When you create new boxes dynamically via the button, those new elements never get those event bindings—so they don't know how to handle drag interactions.

Solution 1: Use Event Delegation (Recommended) #

Instead of binding events to each individual box, attach the listeners to a parent container that holds all your boxes. This way, any box (even dynamically created ones) will trigger the events through event bubbling.

Here's how to implement this:

// Assume all boxes live inside a container with id "box-container"
const container = document.getElementById('box-container');

// Handle dragover to allow dropping
container.addEventListener('dragover', (e) => {
  e.preventDefault(); // Critical—without this, drop won't fire!
  // Highlight the target box when dragging over it
  if (e.target.classList.contains('box')) {
    e.target.classList.add('drag-over');
  }
});

// Handle the drop action
container.addEventListener('drop', (e) => {
  e.preventDefault();
  const draggedText = e.dataTransfer.getData('text/plain');
  // Update the box content if the target is a box
  if (e.target.classList.contains('box')) {
    e.target.textContent = draggedText;
    e.target.classList.remove('drag-over');
  }
});

// Remove highlight when dragging away
container.addEventListener('dragleave', (e) => {
  if (e.target.classList.contains('box')) {
    e.target.classList.remove('drag-over');
  }
});

Solution 2: Bind Events When Creating New Boxes #

If you prefer a more direct approach, you can attach the drag events to each new box the moment you create it. This works well if you don't have a ton of dynamic boxes being added.

Example code for your button click handler:

function createNewBox() {
  const newBox = document.createElement('div');
  newBox.classList.add('box');
  newBox.textContent = 'New Drop Box';

  // Add dragover listener
  newBox.addEventListener('dragover', (e) => {
    e.preventDefault();
    newBox.classList.add('drag-over');
  });

  // Add drop listener
  newBox.addEventListener('drop', (e) => {
    e.preventDefault();
    const text = e.dataTransfer.getData('text/plain');
    newBox.textContent = text;
    newBox.classList.remove('drag-over');
  });

  // Add dragleave listener
  newBox.addEventListener('dragleave', () => {
    newBox.classList.remove('drag-over');
  });

  // Append the new box to your container or body
  document.getElementById('box-container').appendChild(newBox);
}

// Hook up the button to create boxes
document.getElementById('add-box-btn').addEventListener('click', createNewBox);

Quick Reminder #

Don't forget to call e.preventDefault() in the dragover event—this is mandatory to enable the drop event to fire. It's one of the most common gotchas with drag-and-drop!

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