ドラッグ&ドロップ

最近、といっても結構前からハンドボールの作戦盤の Webアプリを作りたいなと思っています

App Store とかには作戦盤のアプリはあるんですけど、ブラウザでは見当たらないんですよね

アプリのインストールは個人的に少しハードルが高い気がしていて、ブラウザ版であれば学生は使いやすいかもなぁ、みんなが気軽に作戦盤を使えるといいなぁというような感じです

作りたいなと思っているものの、しばらくモチベーションが下がっておりなかなか着手できていない状態でした

昨日あたりからすごいやる気がでてきたので着手してみたのですが、ドラッグ&ドロップの機能の実装がライブラリでは難しいっぽいです

あたりを使おうとしたのですが、Next.js v14 であったり、 React v18 だとうまく使えない状態らしく、、

う〜ん、どうしたものか、

一応素の HTML とか JavaScript で作りかけのはあるんですが、ちょっと使いにくいんですよねぇ（中途半端なんで横幅広すぎると使えないです、、しかもタイポしてる、

他にも作ってみたいアプリはあるので先にそっちを作ってみようかなぁ

追記1 ： 2024/1/7

react-beautiful-dnd だとNext.js V14 , React V18 でも`next.config.js` に次のような記述を追加することでドラッグ&ドロップさせることができました

const nextConfig = { reactStrictMode: false };

参考

↓の記事に

React 18のStrictModeを使わないようにすればとりあえずは動く。

とあって、Next.jsではどうするんや〜って調べてたら↑の記事に辿り着きました

react-beautiful-dnd を使っていろいろしてみたものの、ドロップできる場所が決まってしまうみたいで、作戦盤には向いてなさそうだった。。

調べているうちに react-draggable というライブラリを発見！

作戦盤に向いてそうなライブラリなのでこれを使ってみよう