SortableJS でドラッグアンドドロップする時にマウスカーソルを変更したい

状況

• SortableJS を使用して DOM の入れ替え機能を実装した．
• ドラッグ時にマウスカーソルを grabbing （掴んでる感じのやつ）にしてドラッグしている感を出したい．
• TailwindCSS を使用しているが，active:cursor-grabbing を使用してもドラッグ中のカーソルが変更されなかった．

解決策

調べた結果，気合いで解決するしかなかった．

まず css でクラスを作成しておく．

.draggable-cursor * {
  cursor: move !important;
  cursor: -webkit-grabbing !important;
  cursor: -moz-grabbing !important;
  cursor: grabbing !important;
}

Sortable する部分で，onStart と onEnd でクラスをつけたり外したりする．

const sortable = new Sortable(container, {
  animation: 150,
  easing: 'cubic-bezier(1, 0, 0, 1)',
  onStart: function(event) {
    event.target.classList.add('draggable-cursor')
  },
  onEnd: function(event) {
    event.target.classList.remove('draggable-cursor')
  },
});

感想

調べたサイトによっては active:cursor-grabbing で解決できると書いてあったが，自分の環境では効果がなかった．環境が要因かどうかまでは調べていないが，少しのコードで解決できたのでよりあえずヨシ．

以上だ( `･ω･)b