refactor(frontend): vuedraggableを@formkit/drag-and-dropに変更

[kakkokari-gtyih]

What

vuedraggable@next を @formkit/drag-and-drop に置き換えた

Why

#7681 の実現に必要

Additional info (optional)

次のリリースで onSort イベントハンドラが実装され、値の変更時にwatchを呼ぶ必要がなくなる（ formkit/drag-and-drop@a09cfcf ）→v0.2.0で来た

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Add story of storybook
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[codecov]

Codecov Report

Attention: Patch coverage is 10.96606% with 341 lines in your changes missing coverage. Please review.

Project coverage is 19.37%. Comparing base (ed89b4b) to head (dfdf714).
Report is 2 commits behind head on develop.

Files with missing lines	Patch %	Lines
...es/frontend/src/pages/admin/RolesEditorFormula.vue	0.00%	85 Missing ⚠️
...kages/frontend/src/pages/settings/emoji-picker.vue	0.00%	63 Missing ⚠️
packages/frontend/src/components/MkWidgets.vue	0.00%	46 Missing ⚠️
packages/frontend/src/pages/admin/server-rules.vue	0.00%	33 Missing ⚠️
packages/frontend/src/pages/settings/profile.vue	0.00%	33 Missing ⚠️
...ntend/src/pages/page-editor/page-editor.blocks.vue	0.00%	25 Missing ⚠️
packages/frontend/src/pages/settings/navbar.vue	0.00%	25 Missing ⚠️
packages/frontend/src/pages/channel-editor.vue	0.00%	18 Missing ⚠️
packages/frontend/src/widgets/widget.ts	0.00%	10 Missing ⚠️
packages/frontend/src/store.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #14486       +/-   ##
============================================
- Coverage    39.57%   19.37%   -20.20%     
============================================
  Files         1553      721      -832     
  Lines       195043   102444    -92599     
  Branches      3561      992     -2569     
============================================
- Hits         77183    19851    -57332     
+ Misses      117257    82042    -35215     
+ Partials       603      551       -52     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kakkokari-gtyih]

親子関係があるドラッグ（ページエディタとかコンディショナルロールエディタとか）では若干動きがぎこちなくなったけど概ねちゃんとうごく

[kakkokari-gtyih]

MkWidgetの挙動が奇妙なので一旦draft

[kakkokari-gtyih]

有識者募集中

[kakkokari-gtyih]

MkWidgetの挙動が奇妙なので一旦draft

これはなおった

RoleCondEditorのand/orロジックの入れ子になっている場合その親子間でドラッグできるっていう機能が依然として不安定なので一旦無効化した（and/orロジック内でドラッグするのに関してはまともに動くので）

[syuilo]

ｵｯ

[syuilo]

Pageのブロックの入れ子のドラッグとかは問題ないのかしら

[kakkokari-gtyih]

Pageのブロックの入れ子のドラッグとかは問題ないのかしら

あーまだ試してないけどそれもだめな可能性がある

[syuilo]

コード見た感じvue上で動くのではなく直接DOMをいじって実現するタイプっぽいからvueのvaporモードとかその他の機能と相性が悪い可能性があるのが懸念点だわね

[kakkokari-gtyih]

コード見た感じvue上で動くのではなく直接DOMをいじって実現するタイプっぽいからvueのvaporモードとかその他の機能と相性が悪い可能性があるのが懸念点だわね

これ、ドラッグ系のイベントのハンドリングだけして要素の入れ替えはrefを更新することによりvueがやるというしくみだったはず（なので他の機能を通して要素に変更が入るとうまくいかず工夫が必要なケースがあったりした）

[syuilo]

ｵｯ

[syuilo]

目が節穴だったかも

[kakkokari-gtyih]

https://drag-and-drop.formkit.com/

Dragging items within your list will automatically change your list’s state to reflect the new order (which in turn allows the framework to re-render to the correct order)