🍹

Svelte5でSortableJSを使用したメモ

2024/11/20に公開


エリア間でシームレスなドラッグ&ドロップができるコンポーネントを作成したかったのですが、標準のドラッグ&ドロップAPIではドラッグ中のカーソルスタイルが変更できないことが判明したため完全に自分で作成するのは断念しました。代替としてSortableJSライブラリを使用することにしたので、SortableJSを使用したSvelte5のコンポーネントを作成方法を備忘として残しておきます。

作成したコンポーネント

REPL

https://svelte.dev/playground/hello-world?#H4sIAAAAAAAACsVWbW_bNhD-Kze2H2xAtht3GTD5JXBiD-3QoQPafYrygZZomSlNCuTJSWDovw-kSFmKnS4dMMwfLJH39tzdwxMPRNIdIzH5ojTStWC_f4EbtSuUZBJJRDZcMEPi2wPBp8Lq2Q0SBatFUQzNngm0e2tq2Ln9VElkEg2JydSkmhcIO5WVgoGgMp8lBE1C5olMkO8KpRGWchnBwQaEhWb08_qepRhBgPi5YJqi0hVstNpBQoajpVz6eAmZJHI6quPMExkidkMBpEoaBC452hBxKxDM4GDBJEg1oxcx3CZksVgkJIKEXF9fJ-QuOsrHTn5zc1PLl8tl_bJarYJiNbEBBUMwW_XwLNRbgxRZLwDpTxJpbTalTJErCWWRWbkNZdqm_QDS-oQZOAUXqDqmp3ylYAaSPZwUsIka-TD9bu0SOS3mi7oIBxtn6CpSTUfFvJGN27JxkC3lEg6qadRonkgSEWSPSGLUJauiFxh17GSXUZ39H2ZUyDwwZotYmHg0KmXxLR-majcyXuPeXNWuHJEA2KNz4Mj4p1aFqekBAE1145PCRq4PtpXYtu9yzLPLoOYyv72LwNMpbJza_-Wa9IHKTDDb03OsmM1hr3jWxp4KaswJxpDFG0sCTkX8OkTWpCZL3MUzqen4JhQy-Ls6lsc7bO1UE6j5nqBjrC5Ty8uTvKLzMZtDkCBuuRmGXDrnwf6ctHYBM-9r0jUNuG1rQqJV_bBee744H77-8Wkl2I5JbOrT2VOFPbemTQq30Q8F92g6AQOUZuYE42GqWTj_F43zfhRcQcBwzmDcMaj9t1Kzy5zhJ4rMYK_fGUwNIs2w1PIMwm4S9WS4GqJaaE2fen24uoLbu6hrNj5rNn7ZzKM8ggXf4edwwePs0GBSN7D6gQ_C4Tgzq7g58G8L-9JzwxntIH8dGfwstwaZpnnOZX6c-BsqjBu4x2F9njjHgZNrVRYxJMRsqWYJ8Sygku-oVY3h4vKd38wo0o_ZAlFbA7sa8KwxMQ-0-LrVzGyVyGJ4N7z0go3SKfuNCrGm6bcY7Kj2EiW_INXYrFYya6acBHjLNhuWYq_nRtCzCTk8niBfpyMz629W_Wi-ej5Yj-1bzA4vqz2T2BynVmUt2uMnsOVsJbPXuGrg-o9us26dkv7kJKzr5OSUaYmc_jT43q_Wyfi-HtGzhDxslf3yOEJOSwFrLrPYcnpWD9Oq0bRLODQormyT_SIhYHuekMp7Aji8YTTddvvBqahPLVADHNmuCkNlKngTxwq-H8ctbTFdQPBUmx2cy3n9mI4ED1BGFoqLNR2V4qVUx_9FquP_O9XpKOP711PD4JNg7h4zdMwIY3hHdc6lO7ea7dxUciNyWJeqVipolnGZd7QS3HE52DKebzGG921Bxk0h6FMMG8Ee_Z59HTxoWsRg__3ufWmQb54G_hZm7wdUoxdSwXM5sJUwMaRMYnMzyK2bDpa10hnTA5dlDEYJd29pSR54htsYLorH7n6qhL126Xzdu_wVLt6_g_HPv_RbdahbWdt4J-N25FCB8T9V4CTXTkovJ_uvU9M046WxhRq3oJXGOmOCpRiDVJK1cm1IGRJOS21seXJN18_1LLHPqK25zIPqdBRo172x31V_A4-v5U0tDgAA

コード全体

code
App.svelte
<script module lang="ts">
  import DnD, {type AreaObject, SortableOperator} from "./DnD.svelte";
</script>
<script lang="ts">
  const initArea: AreaObject = {
    area1: ["AAA", "BBB"],
    area2: ["CCC", "DDD", "EEE"],
  };
  let show: AreaObject = $state(initArea);

  function update(areas: AreaObject) {
    show = areas;
  }
  const operator = new SortableOperator(initArea, update);
</script>

<p>Area1: {show.area1}</p>
<p>Area2: {show.area2}</p>
<DnD {operator} />
DnD.svelte
<script module lang="ts">
  import Sortable from "https://unpkg.com/sortablejs?module";
  export type Props = {
    operator: SortableOperator,
  };
  export type AreaObject = {area1: string[], area2: string[]};
  export type UpdateHandler = (areas: AreaObject) => void;
  export class SortableOperator {
    #initial: {area1: string[], area2: string[]};
    update: UpdateHandler;
    #sortable: {area1?: Sortable, area2?: Sortable}; 

    constructor(areas: AreaObject, update: UpdateHandler) {
      this.#initial = areas;
      this.update = update;
      this.#sortable = {};
    }
    init(area1: HTMLElement, area2: HTMLElement, options: SortableOptions) {
      this.#sortable = {
        area1: Sortable.create(area1, options),
        area2: Sortable.create(area2, options),
      };
    }
    getLatest(): AreaObject {
      return {
        area1: this.#sortable.area1?.toArray() ?? [],
        area2: this.#sortable.area2?.toArray() ?? [],
      }
    }
    get initial(): AreaObject { return this.#initial; }
  }
</script>
<script lang="ts">
  const { operator }: Props = $props();
  let area1: HTMLElement, area2: HTMLElement;

  let dragging = $state(false);
  const options: SortableOptions = {
    group: "share",
    animation: 150,
    dataIdAttr: "data-id",
    swapThreshold: 0.5,
    forceFallback: true,
    onStart,
    onEnd
  };

  $effect(() => {
    operator.init(area1, area2, options);
  });
  function onStart(ev: Sortable.SortableEvent) {
    dragging = true;
  }
  function onEnd(ev: Sortable.SortableEvent) {
    operator.update(operator.getLatest());
    dragging = false;
  }
</script>

<!----------------------------->

<div class="whole">
  <ul bind:this={area1} class="area {dragging ? "dragging" : ""}">
    {#each operator.initial.area1 as item}
      <li class="item {dragging ? "dragging" : "draggable"}" data-id={item}>{item}</li>
    {/each}
  </ul>
  <ul bind:this={area2} class="area {dragging ? "dragging" : ""}">
    {#each operator.initial.area2 as item}
      <li class="item {dragging ? "dragging" : "draggable"}" data-id={item}>{item}</li>
    {/each}
  </ul>
</div>

<!----------------------------->

<style>
  .whole {
    margin: 0.5rem;
  }
  .area {
    padding: 0.5rem;
    min-height: 3.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(59 130 246);
  }
  .item {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.25rem;
    user-select: none;
  }
  .draggable {
    cursor: grab;
  }
  .dragging {
    cursor: grabbing;
  }
</style>

簡単な解説

SortableJSの使用

Svelteのプロジェクトで通常通り以下コマンドで使用可能。TypeScriptを使用している場合は追加的に型情報をインストールする必要があり、tsconfig.jsonにオプションを追加する必要がある。

standard
npm install --save sortablejs
additional
npm install --save-dev @types/sortablejs
tsconfig.json
{
  "compilerOptions": {
    "resolvePackageJsonExports": false
  }
}

Svelte自動更新システムとの共存

SortableJSはVanillaJSでの使用が想定されておりライブラリが独自に要素を更新している。Svelteプロジェクトで使用する際、単純に使用するとSvelteの要素更新システムと競合が発生する場合があり、想定外に要素が増減するなど意図しない挙動になる場合がある。これを回避するためにコンポーネント外との境界に位置するSortableJSに関する変数や処理をクラスに閉じ込め、それらをSvelteの更新システムが関知しないようにした。そのようにコンポーネント内のSortableJSに関する部分をSvelteの更新システムから隔離することによって、SortableJSにとってVanillaJSのような環境を作り出し意図しない挙動を防止した。

操作中のカーソル変更

Chromium系ブラウザ標準のドラッグ&ドロップAPIでは操作中のカーソルを変更することができない。正確にはドロップ不可エリア上にカーソルが位置するとカーソルが禁止マークへ変化することを抑制できず、その後はカーソル変更の指定がなかったかのように標準のカーソル遷移に戻る。SortableJSも特に指定しない場合、標準のドラッグ&ドロップAPIを使用するため挙動は変わらない。これを回避するためにはSortableOptionsforceFallbackプロパティをtrueにする必要がある。trueにするとDataTransfer.setData等のブラウザ標準のドラッグ&ドロップAPIが全く使用できなくなるため注意する。

カーソルをgrabに変更する

通常時はcursor: grabを要素に指定する。ドラッグ時の変更はSortableOptionsghostClass,chosenClass,dragClassで制御することも可能だが、要素だけのクラスを変更するため、要素上からカーソルが離れた場合に通常のマウスカーソルに戻ってしまう。これを回避するため、Svelteのリアクティビティを活用して動的に要素・ドロップエリア両方のクラスを変更し、ドロップエリア内でもcursor: grabbingを維持するようにした。

注意点

ドラッグ中描画がずれる場合

forceFallbackプロパティをtrueにした場合でもドラッグ中にドラッグアイテムが半透明で描画されるが、それがドラッグ開始位置からずれて描画されることがある。これはドラッグアイテムをposition: fixedを用いて手動で描画制御していることが原因で、この基準点が変わっている場合にずれが起こる。具体的には祖先要素のどこかにtransformbackdrop-filter等を用いている場合、その要素が基準点となってしまうために右下にずれる。これを簡単に回避するには祖先要素でそのようなCSSを用いないことしかない。それが不可能な場合はライブラリを改造してposition: absoluteを用いるように変更するしかないようだ。

所感

もともとドラッグ&ドロップAPIに詳しくなかった事もありますが、このコンポーネントを作成するために相当時間がかかりました。操作中のカーソルを手に変更することがこんなにも手間がかかるのは正直想定外でした。標準APIを用いるとsetTimeoutを用いて時間差でカーソルを変更したとしても即座に元に戻ったりしたので、絶対にカーソルを変更させない鉄の意志を感じます。
SortableJSは大丈夫そうですがライブラリはあまり使いたくないので、また時間ができた時にSortableJSの中身を見て要点をつかんだ後にSvelteのコンポーネントに書き換えれたらいいなぁと思いつつ面倒なのでこのままかもしれません。

参考文献

Discussion