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/

events

技術書典10でReactとGatsbyJSの入門本を頒布します

技術書典10で『つのぶえ出版』としてReactとGatsbyJSの入門本を頒布予定です。 > どんな本かどんな本か 一言でいうと、React/Gatsbyでウェブサイトを書けるようになる本です

poem

欲しいものリスト(2020年版)

欲しいものはAmazonに売ってないので、独自にリストを作ることにしました。 - いい感じの動画を作るセンス 今年に入ってAfter Effectsを使ったアニメーションを作ったりしています。Tw

dev

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

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

Copyright © 2019 @mottox2 All Rights Reserved.