当前位置：首页 > JavaScript

js点击实现元素互换

2026-01-31 04:19:40JavaScript

实现元素互换的 JavaScript 方法

通过 JavaScript 实现点击元素后互换位置，可以结合 DOM 操作和事件监听。以下是几种常见方法：

交换 HTML 元素内容

适用于简单元素内容交换，保留原 DOM 节点：

document.querySelectorAll('.swap-item').forEach(item => {
  item.addEventListener('click', function() {
    const sibling = this.nextElementSibling;
    if (sibling && sibling.classList.contains('swap-item')) {
      const temp = this.innerHTML;
      this.innerHTML = sibling.innerHTML;
      sibling.innerHTML = temp;
    }
  });
});

交换 DOM 节点位置

直接修改节点在 DOM 树中的位置：

function swapNodes(node1, node2) {
  const parent = node1.parentNode;
  const ref = node2.nextSibling;
  parent.insertBefore(node2, node1);
  if (ref) {
    parent.insertBefore(node1, ref);
  } else {
    parent.appendChild(node1);
  }
}

document.querySelector('.container').addEventListener('click', (e) => {
  if (e.target.classList.contains('swap-target')) {
    const next = e.target.nextElementSibling;
    if (next && next.classList.contains('swap-target')) {
      swapNodes(e.target, next);
    }
  }
});

使用 CSS 动画增强交互

添加过渡效果使交换更平滑：

.swappable {
  transition: transform 0.3s ease;
}

function animatedSwap(el1, el2) {
  const rect1 = el1.getBoundingClientRect();
  const rect2 = el2.getBoundingClientRect();

  el1.style.transform = `translate(${rect2.left - rect1.left}px, ${rect2.top - rect1.top}px)`;
  el2.style.transform = `translate(${rect1.left - rect2.left}px, ${rect1.top - rect2.top}px)`;

  setTimeout(() => {
    el1.style.transform = '';
    el2.style.transform = '';
    swapNodes(el1, el2);
  }, 300);
}

实现注意事项

事件委托更适合动态生成的元素
考虑边界情况（如无相邻元素时）
移动端需要添加 touch 事件支持
复杂结构建议使用数据驱动方式（如通过框架）

扩展方案

对于列表重排序需求，可以结合数据数组操作：

js点击实现元素互换

let itemsArray = [...document.querySelectorAll('.list-item')];

function reorderItems(index1, index2) {
  [itemsArray[index1], itemsArray[index2]] = [itemsArray[index2], itemsArray[index1]];
  renderList();
}

function renderList() {
  const container = document.querySelector('.list-container');
  container.innerHTML = '';
  itemsArray.forEach(item => container.appendChild(item));
}