2025/12/17 1:12
Show HN: Picknplace.js, an alternative to drag-and-drop
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
著者は、モバイルでのドラッグ＆ドロップが「悪夢」であると主張しています。理由は、ユーザーがタップ、ホールド、ドラッグ、スクロールを同時に行わなければならないため、ぎこちなく遅く、エラーが発生しやすいプロセスになるからです。この問題を解決するために、著者は「ピック―アンド―プレース」というよりシンプルな2ステップ手法を提案しています。まずアイテムを選択し、その後新しい位置にドロップします。概念実証としての実装では、ピック操作が元のリストの複製を作成し、それを上に置きます。この複製はインタラクティブでアニメーション付きで、ユーザーがスクロールすると更新されます。最後に、ユーザーは変更内容を確認またはキャンセルできます。プロトタイプは再利用可能なライブラリとしてではなく、将来の作業へのインスピレーションのみを目的としています。ソースコードは参考用に公開されています。この手法が洗練されれば、モバイルUIのエルゴノミクスを改善し、エラーを減らし、企業がタッチベースのインターフェイスを設計する方法に影響を与える可能性があります。
本文
なぜ？
ドラッグ＆ドロップの体験は、特にモバイルではすぐに悪夢になりがちだと感じています。
タップ・ホールド・ドラッグ・スクロールを同時に試みると、不自然で遅く、ミスしやすいです。
私はずっと、もっとシンプルな2ステップの方法――まずアイテムを選び、その後配置する――を考えていました。
そこでそのアイデアを実証するために、この基本バージョンを実装しました。
仕組みは？
アイテムを「ピック」すると、元のリストの上にコピーが作られます。
この複製はインタラクティブかつアニメーション付きで、スクロール位置に応じて更新されます。
最後にユーザーは変更を確定するかキャンセルするか選べます。
これはライブラリ？
正確にはそうではありません。これは単なる概念実証（PoC）であり、私が思い描いていたことを伝えるためのものです。
インスピレーションとしてソースコードをご覧いただければ幸いです。