UI窗口堆叠顺序异常与数组管理问题求助

核心问题：DOM复用导致的堆叠/删除异常 #

你遇到的问题根源是Svelte的#each块默认会复用DOM元素，当你只修改数组顺序但没指定唯一key时，Svelte不会重新排列DOM节点，只是更新现有节点的内容，所以窗口的堆叠顺序（由DOM节点顺序决定，后渲染的节点层级更高）不会改变；删除时也会因为DOM复用导致其他窗口移位。

修复代码：添加#each的key属性 #

给#each指定基于窗口唯一ID的key，让Svelte能正确识别每个窗口对应的DOM节点，数组顺序变化时会重新排列DOM，堆叠顺序就会同步更新：

<script>
  let windows = [
    { id: 1, title: "one", content: "two" },
    { id: 2, title: "two", content: "two" },
    { id: 3, title: "three", content: "two" },
  ];

  function moveToTop(index) {
    const clickedWindow = windows[index];
    windows.splice(index, 1);
    windows = [...windows, clickedWindow];
  }

  function removeItem(index) {
    windows.splice(index, 1);
    // 也可以用过滤式保持响应式：windows = windows.filter((_, i) => i !== index);
  }
</script>

{#each windows as window, index (window.id)}
  <div
    use:draggable={{
      bounds: "body",
      cancel: ".no-drag",
    }}
    class="window"
    style="position: absolute; top: {index * 30}px; left: {index * 30}px;"
  >
    <button class="no-drag" on:click={() => moveToTop(index)}>置于顶层</button>
    <div>{window.title}</div>
    <div>{window.content}</div>
    <button on:click={() => removeItem(index)}>关闭窗口</button>
  </div>
{/each}

<style>
  .window {
    width: 200px;
    height: 150px;
    border: 1px solid #ccc;
    background: white;
    padding: 10px;
    cursor: move;
  }
  .no-drag {
    cursor: default;
  }
</style>

更优的窗口层级管理方案 #

除了通过数组顺序控制DOM堆叠，还有两种更灵活的方案：

1. 用z-index属性独立控制层级 #

给每个窗口添加zIndex字段，点击时将当前窗口的zIndex设为所有窗口中的最大值+1，无需修改数组顺序：

<script>
  let windows = [
    { id: 1, title: "one", content: "two", zIndex: 1 },
    { id: 2, title: "two", content: "two", zIndex: 2 },
    { id: 3, title: "three", content: "two", zIndex: 3 },
  ];

  function moveToTop(windowItem) {
    const maxZ = Math.max(...windows.map(w => w.zIndex));
    windowItem.zIndex = maxZ + 1;
  }
</script>

{#each windows as window (window.id)}
  <div
    use:draggable={{ bounds: "body", cancel: ".no-drag" }}
    class="window"
    style="position: absolute; z-index: {window.zIndex}; top: {window.top || 0}px; left: {window.left || 0}px;"
    on:click={() => moveToTop(window)}
  >
    <!-- 窗口内容 -->
  </div>
{/each}

这种方案的优势是可以保留每个窗口的位置信息，不用因为层级变化重新排列DOM，适合需要记住窗口位置的场景。

2. 维护一个"激活队列"数组 #

单独用一个数组记录窗口的激活顺序（顶层到底层），渲染时按这个队列顺序输出，原数组只存储窗口数据：

<script>
  let windowData = [
    { id: 1, title: "one", content: "two" },
    { id: 2, title: "two", content: "two" },
    { id: 3, title: "three", content: "two" },
  ];
  // 初始激活队列按id顺序
  let activeQueue = windowData.map(w => w.id);

  function moveToTop(windowId) {
    activeQueue = activeQueue.filter(id => id !== windowId);
    activeQueue.push(windowId);
  }

  // 获取当前队列对应的窗口数据
  const orderedWindows = activeQueue.map(id => windowData.find(w => w.id === id));
</script>

{#each orderedWindows as window (window.id)}
  <!-- 窗口内容 -->
{/each}

这种方案分离了数据存储和层级顺序，适合窗口数据较多、需要频繁调整层级的场景。

删除问题的解决 #

删除时出现的移位问题同样是因为没有给#each指定key，添加(window.id)后，Svelte会精准移除对应窗口的DOM节点，其他窗口的位置（如果是绝对定位）不会受到影响。

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