mottox2 blog

ソートUIの検討と簡易実装

memo

ソートUIを作るための取り組みをしている。その中でドラッグ中の挙動について迷ったのでメモ。

ドラッグ中の挙動

図中のドラッグ中の挙動に差があり、さわり心地に大きく影響する。

上:ドラッグしている要素は元の位置から動かず、ドラッグ後の位置にプレビューを出す
下:ドラッグしている要素ごと、ドラッグ後の位置に移動する

ノート__5_-38.jpg (249.3 kB)

各方式を採用しているアプリケーション例

上:Sketchのレイヤー、Figma
下:Keynoteのスライド一覧、Torello

おそらく階層構造を含むソートであれば上の方式を採用したほうがよい。
下のほうが直感的だが、ドラッグするとブロックがずれる。
そのため、ツリー構造のような複雑な構造ではブロック移動が直感的でなくなるのかも。

実装例

Reactでソートツリーを実装できるreact-sortable-treeは下方式の移動方式を取っているが、直感的ではない。特に、ドロップ出来ない要素を選択した時の挙動が辛く、赤枠で表示されるところにドロップすると選択した要素が突然元の位置に戻る。(ドロップできる条件を含んだ時に上方式のメリットが出てくる可能性がある)

https://frontend-collective.github.io/react-sortable-tree/?path=/story/basics--callbacks

ということでソートUIの簡易実装をしてみた。(ただし、まだツリー構造を実装していない)

https://react-tree-ui.netlify.com/

B!
dev

Next.jsのStatic Generationを追う際に参考にしたページ

Next.jsのStatic Generationを追っておく際に見たページをまとめた。簡単に要点をまとめてはいるが、詳しくはリンク先のオリジナルを見てほしい。 > 2019 in Review2

dev

リモート勤務なITエンジニアが分報で気をつけること

2020年になり誰もが予想しなかった速度で、人々の営みはオンライン上で行われるようになりました。もちろん仕事も例外ではありません。 そういった変化の中ではオンライン上のコミュニケーションがより重要

poen

うちでやりたい○つのこと

新型コロナウイルスの影響で外出が推奨されなくなって数週間がたった。 「自分は普段から引きこもりがちだ。大して影響はないだろう。」と構えていたが、日に日に後ろ向きの感情が強くなっているように感じている

うちにいよう
Copyright © 2019 @mottox2 All Rights Reserved.