Svelte拖拽排序列表：实现指定位置添加及跨列表拖拽

要解决你遇到的问题，核心是在拖拽过程中计算元素的插入位置，而不是直接将元素追加到数组末尾。下面是具体的实现思路和代码修改方案：

核心思路 #

1. 拖拽开始时记录被拖拽元素的原始位置和所属列表；
2. 在拖拽经过列表项时，通过鼠标位置判断应该插入的目标索引；
3. 拖拽结束时，利用数组的splice方法将元素插入到指定位置（单列表内排序本质是同数组内的元素移动）。

代码实现示例 #

状态定义 #

<script>
  // 示例列表数据，可根据需求替换为复杂对象
  let lists = [
    { id: '列表1', items: ['项目1', '项目2', '项目3'] },
    { id: '列表2', items: ['项目A', '项目B', '项目C'] }
  ];
  
  // 拖拽状态变量
  let draggedItem = null;
  let draggedFromListId = null;
  let targetInsertIndex = null;
</script>

列表与拖拽元素渲染 #

{#each lists as list}
  <div class="list-container">
    <h3>{list.id}</h3>
    {#each list.items as item, idx}
      <!-- 拖拽项 -->
      <div 
        class="drag-item"
        draggable="true"
        on:dragstart={() => {
          draggedItem = item;
          draggedFromListId = list.id;
        }}
        on:dragover={(e) => {
          e.preventDefault(); // 必须阻止默认行为才能触发drop事件
          
          // 计算插入位置：鼠标在元素上半部分则插入当前索引，下半部分插入索引+1
          const elementRect = e.currentTarget.getBoundingClientRect();
          const midPoint = elementRect.top + elementRect.height / 2;
          targetInsertIndex = e.clientY < midPoint ? idx : idx + 1;
        }}
        on:drop={() => {
          const sourceList = lists.find(l => l.id === draggedFromListId);
          const targetList = list;

          // 从原列表移除元素
          const sourceIdx = sourceList.items.indexOf(draggedItem);
          sourceList.items.splice(sourceIdx, 1);

          // 插入到目标位置（如果未获取到索引则 fallback 到追加）
          if (targetInsertIndex !== null) {
            targetList.items.splice(targetInsertIndex, 0, draggedItem);
          } else {
            targetList.items.push(draggedItem);
          }

          // 重置拖拽状态
          draggedItem = null;
          draggedFromListId = null;
          targetInsertIndex = null;
        }}
      >
        {item}
      </div>

      <!-- 插入位置视觉提示线 -->
      {#if targetInsertIndex === idx}
        <div class="insert-line top"></div>
      {:else if targetInsertIndex === idx + 1}
        <div class="insert-line bottom"></div>
      {/if}
    {/each}
  </div>
{/each}

样式优化（提升拖拽体验） #

.list-container {
  border: 1px solid #e0e0e0;
  padding: 1rem;
  margin: 1rem;
  display: inline-block;
  min-width: 150px;
}

.drag-item {
  padding: 0.6rem;
  margin: 0.5rem 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: grab;
  transition: background-color 0.2s;
}

.drag-item:active {
  cursor: grabbing;
  background-color: #e8f0fe;
}

.insert-line {
  height: 2px;
  background-color: #2196f3;
  width: 100%;
}

.insert-line.top {
  margin-bottom: 0.3rem;
}

.insert-line.bottom {
  margin-top: 0.3rem;
}

关键细节说明 #

• dragover事件：必须调用e.preventDefault()才能触发后续的drop事件，同时通过元素的位置计算插入索引，给用户明确的视觉反馈；
• 数组操作：使用splice方法实现元素的删除和插入，单列表内排序时，因为源列表和目标列表是同一个数组，所以先删除再插入就完成了元素的位置移动；
• 复杂数据适配：如果你的列表项是包含唯一ID的对象，不要用indexOf查找元素，应该用findIndex根据ID定位，避免重复元素导致的错误。

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