如何在 Svelte 中实现拖放功能

拖放功能看起来很简单,直到你真正尝试去实现它。浏览器提供了原生 API,但它存在实际的局限性:没有流畅的动画效果、触摸支持不一致,以及跨浏览器行为不可预测。如果你曾经看到过元素在放下时生硬地卡入位置,你就会明白这个问题。

本指南涵盖了在 Svelte 中实现拖放功能的两种实用方法——使用原生 HTML5 API 和使用库——这样你可以根据实际构建的内容选择合适的工具。

理解两种方法

在编写任何代码之前,了解你要在哪些选项之间做选择会很有帮助。

原生 HTML5 拖放 API 使用浏览器内置事件:dragstart、dragover、dragenter、dragleave 和 drop。它不需要任何依赖,适用于简单的使用场景。权衡之处在于动画需要手动实现,触摸支持在不同设备上不一致,拖动过程中的视觉反馈有限。你可以在 MDN 拖放文档中了解更多关于该 API 的信息。

基于库的解决方案,如 svelte-dnd-action 或 Neodrag,开箱即用地处理了困难的部分——流畅的 FLIP 动画、触摸支持和无障碍交互。它们会增加少量的打包体积,但对于任何超出基本可排序列表的功能,都能节省大量实现时间。

在 Svelte 5 中使用原生 API 实现拖放

下面是一个使用 Svelte 5 runes 语法的简洁单列表重排序示例:

<script>
  let items = $state(['Svelte', 'SvelteKit', 'Vite', 'TypeScript']);
  let dragIndex = $state(null);

  function handleDragStart(event, index) {
    dragIndex = index;
    event.dataTransfer.effectAllowed = 'move';
  }

  function handleDragOver(event, index) {
    event.preventDefault();
    if (dragIndex === null || dragIndex === index) return;

    const updated = [...items];
    const [moved] = updated.splice(dragIndex, 1);
    updated.splice(index, 0, moved);

    items = updated;
    dragIndex = index;
  }

  function handleDragEnd() {
    dragIndex = null;
  }
</script>

<ul>
  {#each items as item, index (item)}
    <li
      draggable="true"
      class:dragging={dragIndex === index}
      ondragstart={(e) => handleDragStart(e, index)}
      ondragover={(e) => handleDragOver(e, index)}
      ondragend={handleDragEnd}
    >
      {item}
    </li>
  {/each}
</ul>

<style>
  li {
    padding: 10px 16px;
    margin: 6px 0;
    background: #f1f1f1;
    cursor: grab;
    list-style: none;
    border-radius: 4px;
  }
  .dragging {
    opacity: 0.4;
  }
</style>

关于这个 Svelte 5 模式,有几点值得注意:

• $state() 替代了 Svelte 3/4 中旧的响应式变量声明方式。
• Svelte 5 除了支持传统的 on:dragstart 事件指令外,还支持 ondragstart 属性语法。
• 列表在拖动过程中(在 dragover 时)更新,而不仅仅是在放下时更新——这为用户提供了实时的视觉反馈。

SvelteKit 注意事项: 拖动事件仅在客户端有效。如果你在使用带 SSR 的 SvelteKit,请将任何与拖动相关的逻辑包装在 onMount 中,或使用来自 $app/environment 的 browser 检查来保护它。

何时应该使用 svelte-dnd-action

原生方法适用于简单的列表重排序场景。但一旦你需要以下任何功能,就应该使用 svelte-dnd-action:

• 流畅的 FLIP 动画,在列表位置之间过渡
• 多列表拖放(看板风格的面板)
• 触摸和移动端支持,无需额外代码
• 内置的无障碍键盘交互

svelte-dnd-action 的使用模式很直接——你将 use:dndzone action 应用到容器上,传入你的 items 数组,并处理 consider 和 finalize 事件来更新状态。每个 item 需要一个唯一的 id 属性。配合 Svelte 内置的 flip 动画,你可以在不到 20 行代码中获得生产级别的拖动交互。

总结

对于基本的 Svelte 拖放列表重排序,使用 Svelte 5 runes 的原生浏览器 API 可以在无依赖的情况下实现。对于更复杂的需求——带动画的看板、触摸支持或无障碍交互——svelte-dnd-action 是实用的选择。从原生方法开始以理解其机制,然后在需求要求时升级到库。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.