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

jsx-presentationを使ってJSXでpptxファイルを生成する

週末にpptxファイルが生成できるスライド作成ツールのプロトタイプを作りました。 スライドエディタで作成したスライドをPowerPoint形式で出力できるようにした。 まだまだサイズやアスペクト

dev

Reactで寿司を回すタイピングゲームを作った

@dala00さんが企画している、1週間でテーマに沿ったWebサービスを作る #web1weekという企画に参加しました。今回は第二回の開催で「Like」というお題でした。 esaをより便利に使う

dev

esaをより便利に使うための拡張機能「Refined esa」をつくった

@dala00さんが企画している、1週間でテーマに沿ったWebサービスを作る #web1weekという企画に参加しました。今回は第二回の開催で「Like」というお題でした。 自分は「自分の好きなWe

Copyright © 2019 @mottox2 All Rights Reserved.