Svelte5でSortableJSを使用したメモ
エリア間でシームレスなドラッグ&ドロップができるコンポーネントを作成したかったのですが、標準のドラッグ&ドロップAPIではドラッグ中のカーソルスタイルが変更できないことが判明したため完全に自分で作成するのは断念しました。代替としてSortableJSライブラリを使用することにしたので、SortableJSを使用したSvelte5のコンポーネントを作成方法を備忘として残しておきます。
作成したコンポーネント
REPL
コード全体
code
<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} />
<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にオプションを追加する必要がある。
npm install --save sortablejs
npm install --save-dev @types/sortablejs
{
"compilerOptions": {
"resolvePackageJsonExports": false
}
}
Svelte自動更新システムとの共存
SortableJSはVanillaJSでの使用が想定されておりライブラリが独自に要素を更新している。Svelteプロジェクトで使用する際、単純に使用するとSvelteの要素更新システムと競合が発生する場合があり、想定外に要素が増減するなど意図しない挙動になる場合がある。これを回避するためにコンポーネント外との境界に位置するSortableJSに関する変数や処理をクラスに閉じ込め、それらをSvelteの更新システムが関知しないようにした。そのようにコンポーネント内のSortableJSに関する部分をSvelteの更新システムから隔離することによって、SortableJSにとってVanillaJSのような環境を作り出し意図しない挙動を防止した。
操作中のカーソル変更
Chromium系ブラウザ標準のドラッグ&ドロップAPIでは操作中のカーソルを変更することができない。正確にはドロップ不可エリア上にカーソルが位置するとカーソルが禁止マークへ変化することを抑制できず、その後はカーソル変更の指定がなかったかのように標準のカーソル遷移に戻る。SortableJSも特に指定しない場合、標準のドラッグ&ドロップAPIを使用するため挙動は変わらない。これを回避するためにはSortableOptionsのforceFallbackプロパティをtrueにする必要がある。trueにするとDataTransfer.setData等のブラウザ標準のドラッグ&ドロップAPIが全く使用できなくなるため注意する。
カーソルをgrabに変更する
通常時はcursor: grabを要素に指定する。ドラッグ時の変更はSortableOptionsのghostClass,chosenClass,dragClassで制御することも可能だが、要素だけのクラスを変更するため、要素上からカーソルが離れた場合に通常のマウスカーソルに戻ってしまう。これを回避するため、Svelteのリアクティビティを活用して動的に要素・ドロップエリア両方のクラスを変更し、ドロップエリア内でもcursor: grabbingを維持するようにした。
所感
もともとドラッグ&ドロップAPIに詳しくなかった事もありますが、このコンポーネントを作成するために相当時間がかかりました。操作中のカーソルを手に変更することがこんなにも手間がかかるのは正直想定外でした。標準APIを用いるとsetTimeoutを用いて時間差でカーソルを変更したとしても即座に元に戻ったりしたので、絶対にカーソルを変更させない鉄の意志を感じます。
SortableJSは大丈夫そうですがライブラリはあまり使いたくないので、また時間ができた時にSortableJSの中身を見て要点をつかんだ後にSvelteのコンポーネントに書き換えれたらいいなぁと思いつつ面倒なのでこのままかもしれません。
Discussion