Skip to content

enhance(frontend): MkDraggable をタッチ操作 (長押し → ドラッグ) に対応(タッチイベント追加版)#17534

Open
fruitriin wants to merge 2 commits into
misskey-dev:developfrom
fruitriin:mkdraggable-sp
Open

enhance(frontend): MkDraggable をタッチ操作 (長押し → ドラッグ) に対応(タッチイベント追加版)#17534
fruitriin wants to merge 2 commits into
misskey-dev:developfrom
fruitriin:mkdraggable-sp

Conversation

@fruitriin
Copy link
Copy Markdown
Contributor

@fruitriin fruitriin commented Jun 3, 2026

What

スマートフォン等のタッチデバイスで MkDraggable による並び替えができるようにする。
ghost element を追従させながら elementFromPoint でドロップ先を判定する。

Why

スマホでドラッグアンドドロップできない

Fix #17515
Fix #17487

Additional info (optional)

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

スマートフォン等のタッチデバイスで MkDraggable による並び替えができる
ようにする。ghost element を追従させながら elementFromPoint でドロップ先
を判定する。

ドラッグ開始モードを 3 種類から選べる:

- manualDragStart: ハンドル要素を触った瞬間に即ドラッグ開始 (待ち時間 0ms)
  → profile / server-rules / RolesEditorFormula / channel-editor /
     settings/navbar / page-editor のセクション
- longPress=true: 行全体を 400ms 長押しでドラッグ開始 (待ち時間中に動かす
  と通常スクロールに譲る) → MkWidgets (行が大きいケース)
- longPress=false (default): 行全体を一定量 (8px) 動かしたらドラッグ開始。
  tap (動かさず touchend) はそのまま click として通過するので、行内に tap
  メニュー等を持つアイテムでも両立する → MkPostFormAttaches / emoji-palette

iOS の long-press callout / 標準コンテキストメニューは touch session 中
だけ抑止し、PC の右クリックには干渉しない。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@dosubot dosubot Bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jun 3, 2026
@github-actions github-actions Bot added the packages/frontend Client side specific issue/PR label Jun 3, 2026
@codecov
Copy link
Copy Markdown

codecov Bot commented Jun 3, 2026

Codecov Report

❌ Patch coverage is 1.50754% with 196 lines in your changes missing coverage. Please review.
✅ Project coverage is 15.00%. Comparing base (e50603e) to head (f70c39b).

Files with missing lines Patch % Lines
packages/frontend/src/components/MkDraggable.vue 1.50% 147 Missing and 49 partials ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop   #17534      +/-   ##
===========================================
- Coverage    24.93%   15.00%   -9.93%     
===========================================
  Files         1158      247     -911     
  Lines        39539    12545   -26994     
  Branches     11011     4242    -6769     
===========================================
- Hits          9858     1883    -7975     
+ Misses       23780     8339   -15441     
+ Partials      5901     2323    -3578     

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@fruitriin
Copy link
Copy Markdown
Contributor Author

別案として、 PointerEvents で実装しなおすとマウスイベント, タッチイベント, ペンイベントを別々に実装しなくていいらしい

@kakkokari-gtyih
Copy link
Copy Markdown
Contributor

別案として、 PointerEvents で実装しなおすとマウスイベント, タッチイベント, ペンイベントを別々に実装しなくていいらしい

多分そっちに寄せる方向だったと思うのでそれでも良さそう

@fruitriin
Copy link
Copy Markdown
Contributor Author

fruitriin commented Jun 3, 2026

別案として、 PointerEvents で実装しなおすとマウスイベント, タッチイベント, ペンイベントを別々に実装しなくていいらしい
多分そっちに寄せる方向だったと思うのでそれでも良さそう

めちゃくちゃ差分大きくなるけどそれでもよければPointerEvents版PRも出します

@kakkokari-gtyih
Copy link
Copy Markdown
Contributor

すでに差分デカいのであれ

@fruitriin
Copy link
Copy Markdown
Contributor Author

PointerEvents統一版、調整中...(MkPagesでのみ挙動不審)

@fruitriin fruitriin changed the title enhance(frontend): MkDraggable をタッチ操作 (長押し → ドラッグ) に対応 enhance(frontend): MkDraggable をタッチ操作 (長押し → ドラッグ) に対応(タッチイベント追加版) Jun 3, 2026
@fruitriin
Copy link
Copy Markdown
Contributor Author

@kakkokari-gtyih なんかもうめっちゃ変えた版できました #17535

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

packages/frontend Client side specific issue/PR size:L This PR changes 100-499 lines, ignoring generated files.

Projects

2 participants