↗️

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

2024/07/03に公開

状況

  • 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 する部分で,onStartonEnd でクラスをつけたり外したりする.

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

GitHubで編集を提案

Discussion