拖拽交换3×3网格图片后，如何更新显示图片的新顺序？

你已经实现了图片拖拽交换功能，但底部显示的order数组未同步更新，核心原因是拖拽交换DOM元素后，没有对顺序数组执行对应的交换操作，且原代码通过innerHTML传递数据的方式不够可靠。

以下是修复后的完整代码，同时优化了交互体验和数据处理逻辑：

修改后的完整代码 #

HTML #

<div class="container">
  <div draggable="true" class="image" id="1" data-id="1"><img src="Dummy billeder/nummer 1.png" width="100px"></div>
  <div draggable="true" class="image" id="2" data-id="2"><img src="Dummy billeder/nummer 2.png" width="100px"></div>
  <div draggable="true" class="image" id="3" data-id="3"><img src="Dummy billeder/nummer 3.png" width="100px"></div>
  <div draggable="true" class="image" id="4" data-id="4"><img src="Dummy billeder/nummer 4.png" width="100px"></div>
  <div draggable="true" class="image" id="5" data-id="5"><img src="Dummy billeder/nummer 5.png" width="100px"></div>
  <div draggable="true" class="image" id="6" data-id="6"><img src="Dummy billeder/nummer 6.png" width="100px"></div>
  <div draggable="true" class="image" id="7" data-id="7"><img src="Dummy billeder/nummer 7.png" width="100px"></div>
  <div draggable="true" class="image" id="8" data-id="8"><img src="Dummy billeder/nummer 8.png" width="100px"></div>
  <div draggable="true" class="image" id="9" data-id="9"><img src="Dummy billeder/nummer 9.png" width="100px"></div>
</div>

<div id="order" class="order"></div>

CSS #

.container {
  width: 330px;
  height: 330px;
  background-color: lightgrey;
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 100px;
  height: 100px;
  background-color: #fff5d7;
  text-align: center;
  line-height: 100px;
  margin: 5px;
  cursor: move;
}

.image.dragover {
  background-color: #ffe082;
}

.order {
  width: 330px;
  height: 50px;
  background-color: lightgrey;
  margin-top: 10px;
  text-align: center;
  line-height: 50px;
  font-size: x-large;
  font-family: Helvetica;
}

JavaScript #

let order = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function showOrder(order) {
  document.getElementById('order').textContent = "顺序: " + order.join(', ');
}

showOrder(order);

let draggedImage = null;
let items;

function dragStart(e) {
  draggedImage = this;
  e.dataTransfer.effectAllowed = "move";
  const draggedId = parseInt(this.dataset.id);
  e.dataTransfer.setData("text/plain", draggedId);
}

function dragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
}

function dragEnter(e) {
  this.classList.add("dragover");
}

function dragLeave(e) {
  this.classList.remove("dragover");
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  if (draggedImage === this) return;

  const draggedId = parseInt(e.dataTransfer.getData("text/plain"));
  const targetId = parseInt(this.dataset.id);

  const draggedIndex = order.indexOf(draggedId);
  const targetIndex = order.indexOf(targetId);

  // 交换数组元素
  [order[draggedIndex], order[targetIndex]] = [order[targetIndex], order[draggedIndex]];

  // 交换DOM内容
  const tempHTML = draggedImage.innerHTML;
  draggedImage.innerHTML = this.innerHTML;
  this.innerHTML = tempHTML;

  // 同步data-id和id属性
  const tempId = draggedImage.dataset.id;
  draggedImage.dataset.id = this.dataset.id;
  this.dataset.id = tempId;

  const tempElementId = draggedImage.id;
  draggedImage.id = this.id;
  this.id = tempElementId;

  // 更新顺序显示
  showOrder(order);
}

function dragEnd(e) {
  items.forEach(item => item.classList.remove("dragover"));
}

document.addEventListener("DOMContentLoaded", () => {
  items = document.querySelectorAll(".container .image");
  items.forEach(item => {
    item.addEventListener("dragstart", dragStart);
    item.addEventListener("dragenter", dragEnter);
    item.addEventListener("dragover", dragOver);
    item.addEventListener("dragleave", dragLeave);
    item.addEventListener("drop", drop);
    item.addEventListener("dragend", dragEnd);
  });
});

关键修改说明 #

1. 数据传递优化：用data-id存储图片编号，替代传递innerHTML，避免冗余的HTML字符串操作，逻辑更清晰可靠。
2. 数组同步：在drop函数中，通过编号找到两个元素在order数组中的位置，直接交换数组元素，确保顺序和视觉一致。
3. 属性同步：交换DOM内容后，同步更新元素的data-id和id属性，保证元素标识和内容匹配。
4. 样式修复：给order元素添加class="order"让CSS样式生效；增加dragover状态的背景色，提升交互反馈。
5. 显示优化：用join(', ')替代toString()，让顺序显示更易读。

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