检查按钮交换位置的代码，确保代码只在特定情况下触发交换。例如，在使用 drag-and-drop 操作时，只有在拖动的按钮与目标按钮不相同时才应触发交换位置的代码。以下是一个示例：

let dragButton = null;

function handleDragStart(event) {
  dragButton = event.target;
}

function handleDragEnd(event) {
  dragButton = null;
}

function handleDrop(event) {
  event.preventDefault();
  if (dragButton && dragButton !== event.target) {
    const temp = dragButton.style.order;
    dragButton.style.order = event.target.style.order;
    event.target.style.order = temp;
  }
}

function handleDragOver(event) {
  event.preventDefault();
}

const buttons = document.querySelectorAll('button');
buttons.forEach((button, index) => {
  button.style.order = index;
  button.addEventListener('dragstart', handleDragStart);
  button.addEventListener('dragend', handleDragEnd);
  button.addEventListener('dragover', handleDragOver);
  button.addEventListener('drop', handleDrop);
});

在上面的代码中，我们使用 Flexbox 的 order 属性来控制按钮的位置。在拖动按钮时，我们在 handleDragStart 函数中存储了拖动的按钮。在放置按钮时，我们检查拖动的按钮与目标按钮是否相同。如果它们不相同，则交换它们的 order 值。而在拖动结束时，我们将 dragButton 变量重置为 null。