0

諸注意 ※追記

この質問は、「下記ご回答いただきたいこと」の回答は得られていないため解決済みにしておりませんが、質問者の根本的な問題が解決しましたので実質解決済みであります。

詳細は「回答」欄の筆者コメントよりご確認ください。

やりたいが、分からなくて困っていること

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では見れない...などの考慮は必要ありません。

現状の調査で見つかっている目ぼしいと思われる記事

参考資料

下記のような挙動を想定しております。

画像サイズも上記サイトが理想とかなり近いです。

4
  • 1
    ご自身で見つけられた記事の「HTML Drag and Drop API」の内容では目的の機能が実装できなかったということでしょうか?もしうまく動かなかったのであれば、その実装されたソースを開示していただいた方が、問題点等の指摘が付きやすいと思います。 2021年3月11日 14:52
  • > ご自身で見つけられた記事の「HTML Drag and Drop API」の内容では目的の機能が実装できなかったということでしょうか?
    – sck
    2021年3月11日 15:04
  • すみません。誤って文章が完成する前に投稿したあと、編集したつもりが編集が完了できておりませんでした。 まだコードの実装は行っておりません。一度、ある程度の数の選択肢を把握してから、また名称を把握して自分で検索しやすい状況になって選択肢を増やせるようになってから、その中から目ぼしいものを試していこうと考えておりました。
    – sck
    2021年3月12日 7:54
  • 追記します。質問内容は未解決のままではありますが、私の実現したい挙動とかなり近い挙動を行ってくれそうなライブラリを確認したのでそれを掲載させていただきます。 github.com/atlassian/react-beautiful-dnd 名称を把握してから検索するなどして一つ一つ試して行こうと考えておりましたが、一足飛びに利用できるものが見つかってしまいましたので、質問自体は未解決のままになりそうですが、一旦クローズとさせていただきたいです。このあと本文にも追記します。 Sugiyama Koichi様、ご助言ありがとございました。
    – sck
    2021年3月12日 8:23

1 件の回答 1

0

実現したい挙動とかなり近い挙動を行ってくれるライブラリの存在を確認しましたので、そちらを掲載いたします。

名称を把握してから検索するなどして一つ一つ試して行こうと考え今回の質問を行いましたが、一足飛びに利用できるものが見つかってしまいました。
ですので、このページの質問自体は未解決のままになりそうですが、一旦解決とさせていただきたいです。

ご尽力いただきました皆様、ありがとうございました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。