質問: ### 諸注意 ※追記 この質問は、「下記ご回答いただきたいこと」の回答は得られていないため解決済みにしておりませんが、質問者の根本的な問題が解決しましたので実質解決済みであります。 詳細は「回答」欄の筆者コメントよりご確認ください。 ### やりたいが、分からなくて困っていること Webにおいて、ドラッグ・アンド・ドロップで画像を任意の位置に移動させる処理の種類と名称を知りたいです。 画像はどこかからひっぱってくるのではなく、ページの表示時に規定の位置に既に存在するものとします。 加えて、画像を任意のエリアへ移動できたときに、そのエリアの中央(さらにできれば左揃えで)に整える処理も行いたいです。 具体例としましては、下記「参考資料」欄に示しましたサイトをご覧いただければと思います。 ### ご回答いただきたいこと 下記4点です。4点挙げましたが、単体でも構いません。 1. Webにおいて、ドラッグ・アンド・ドロップで画像を任意の位置に移動させる処理の種類。 2. 1の名称(以後の検索等で活用したいと考えています。名前がついていなければ「名前はついていない」等で問題ありません)。 3. 画像を任意のエリアへ移動できたときに、そのエリアの中央(さらにできれば左揃えで)に整える処理の種類。 4. 3の名称(以下、2の括弧内と同文) ### 現状の主な使用技術 * React.js ### 想定する動作環境 1. PCのWebブラウザ 2. スマートフォンのWebブラウザ 3. タブレットのWebブラウザ 1はマウスやトラックパッドの操作、2はタップでの操作を想定しております。 3は合わせて実現できたら嬉しいな、程度で考えております。不明でも問題ありません。 具体的な指定ができずに申し訳ないのですが、Webブラウザの種類は、いわゆる一般家庭で使われているブラウザの種類とバージョンで閲覧できれば問題ありません。ですので、例えば現在利用率3%のIEのVersionx.x.xでは見れない...などの考慮は必要ありません。 ### 現状の調査で見つかっている目ぼしいと思われる記事 * HTML Drag and Drop API * Javascript でドラック&ドロップを実装 (ライブラリ使わない) - Qiita ### 参考資料 下記のような挙動を想定しております。 * Ultimate Smash Tier list 画像サイズも上記サイトが理想とかなり近いです。
回答: 実現したい挙動とかなり近い挙動を行ってくれるライブラリの存在を確認しましたので、そちらを掲載いたします。 * react-beautiful-dnd 名称を把握してから検索するなどして一つ一つ試して行こうと考え今回の質問を行いましたが、一足飛びに利用できるものが見つかってしまいました。 ですので、このページの質問自体は未解決のままになりそうですが、一旦解決とさせていただきたいです。 ご尽力いただきました皆様、ありがとうございました。