如何整体拖拽含多元素的列表行且不改变内部元素顺序

Here's a working implementation using div-based rows that fixes both your issues—preventing child elements from triggering drags and ensuring rows only drop between other rows, not inside them.

Full Code Example #

HTML #

<div class="drag-container">
  <div class="draggable-row" draggable="true">
    <span>Row 1</span>
    <input type="text" placeholder="Enter text">
    <button>Action</button>
  </div>
  <div class="draggable-row" draggable="true">
    <span>Row 2</span>
    <input type="text" placeholder="Enter text">
    <button>Action</button>
  </div>
  <div class="draggable-row" draggable="true">
    <span>Row 3</span>
    <input type="text" placeholder="Enter text">
    <button>Action</button>
  </div>
</div>

CSS #

.drag-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 1rem;
  max-width: 600px;
}

.draggable-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: grab;
  transition: opacity 0.2s;
}

.draggable-row:active {
  cursor: grabbing;
}

.draggable-row.dragging {
  opacity: 0.5;
}

.draggable-row.drag-over {
  border-top: 2px solid #2196F3;
}

.draggable-row input,
.draggable-row button {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.draggable-row button {
  background-color: #2196F3;
  color: white;
  border: none;
  cursor: pointer;
}

JavaScript #

const container = document.querySelector('.drag-container');
let draggedRow = null;

// Initialize drag events for each row
container.querySelectorAll('.draggable-row').forEach(row => {
  // Start dragging
  row.addEventListener('dragstart', (e) => {
    draggedRow = row;
    row.classList.add('dragging');
  });

  // End dragging
  row.addEventListener('dragend', () => {
    draggedRow = null;
    row.classList.remove('dragging');
    // Clear all drop zone highlights
    container.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
  });

  // Prevent child elements from triggering drag
  row.querySelectorAll('*').forEach(child => {
    child.addEventListener('dragstart', (e) => {
      e.stopPropagation();
      e.preventDefault();
    });
  });
});

// Handle drag over to allow drop
container.addEventListener('dragover', (e) => {
  e.preventDefault();
  const targetRow = getDropTargetRow(container, e.clientY);
  if (targetRow) {
    container.insertBefore(draggedRow, targetRow);
  } else {
    container.appendChild(draggedRow);
  }
});

// Highlight drop zone on enter
container.addEventListener('dragenter', (e) => {
  e.preventDefault();
  if (e.target.classList.contains('draggable-row')) {
    e.target.classList.add('drag-over');
  }
});

// Remove highlight on leave
container.addEventListener('dragleave', (e) => {
  if (e.target.classList.contains('draggable-row')) {
    e.target.classList.remove('drag-over');
  }
});

// Helper: Find which row to insert the dragged row before
function getDropTargetRow(container, mouseY) {
  const rows = [...container.querySelectorAll('.draggable-row:not(.dragging)')];
  
  return rows.reduce((closest, row) => {
    const rect = row.getBoundingClientRect();
    const offset = mouseY - rect.top - rect.height / 2;
    if (offset < 0 && offset > closest.offset) {
      return { offset, element: row };
    }
    return closest;
  }, { offset: Number.NEGATIVE_INFINITY }).element;
}

Key Fixes Explained #

1. Prevent Child Element Drags:
   We add a dragstart listener to every child element inside the row. Calling e.stopPropagation() stops the drag event from bubbling up to the row, so dragging buttons/inputs won't trigger the row drag. e.preventDefault() ensures the browser doesn't try to drag the child element itself.

2. Controlled Drop Placement:
   The getDropTargetRow helper calculates where the mouse is relative to each row's center. This lets us insert the dragged row either before or after the target row, creating an insert-style drag experience. Rows can't drop inside other rows because we only handle drops on the container and target rows.

3. Visual Feedback:

   • grab/grabbing cursors indicate draggable state
   • Opacity change when dragging
   • Blue top border on rows where the dragged row will be inserted

This implementation keeps your inline elements fully functional (buttons clickable, inputs editable) while allowing entire rows to be reordered seamlessly.

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