Jul 26, 2019

Sortablejsのfilter使用時の注意点

SortableJS使用時に少しハマったので記録.

filter該当箇所がinput要素などのイベント発火が必要な場合の注意点

以下のHTMLを例にする.

<div id="list">
  <div class="input-title">
    <input type="text" name="title">
  </div>
  <div class="drag">
    drag1
  </div>
  <div class="drag">
    drag2
  </div>
  <div class="drag">
    drag3
  </div>
</div>

上記の drag を Sortable でDnDさせようとすると親divの id=list を使用してこんな感じに実装すると思う.

const el = document.getElementById("list");
Sortable.create(el, {
    filter:
      ".input-title",
    animation: 200
});

しかしこのままだとinputタグにフォーカスが当てられなくなった. 詳しく原因は追っていないがfilterを適用したことにより？イベントが奪われているような感じ. とりあえずGithubのissueを検索してみるとそれっぽいのがヒットした. create()にわたすオプションにpreventOnFilter: falseを設定しろと書いてあるので下記のように修正.

const el = document.getElementById("list");
Sortable.create(el, {
    filter:
      ".input-title",
    animation: 200,
    preventOnFilter: false
});

無事フォーカスがあたるようになった. ちなみにこのオプションはREADMEには しっかり と書いてあったのでちゃんと読めって話でした.