Blockchain code Metaverse VR

Crypto×VR×SmartContract(524)

スポンサーリンク

//tips

//smart contract

ドラッグ&ドロップでカードの移動を可能にする方法を見つけたが、これだとdatabaseへの反映は別処理になりそう。どちらかというとeditに使うというより[id]で使う方が適当に思えたので別の方法を考えか。

https://www.geeksforgeeks.org/how-to-add-draggable-components-in-next-js/

https://blog.gaji.jp/2021/11/09/8481/

【React】ドラッグ&ドロップでリストを並び替えて並び順をstateに保持

一旦挙動を見てみる。

npm i react-draggable
import Draggable from 'react-draggable';

<div>
<h3>GeeksforGeeks - Draggable Components</h3>
<Draggable>
<div>We can move this text</div>
</Draggable>
</div>

を試すとどこにでもドラックして移動させることができた。

試しにcardの方に適用してみるとドラッグした位置に移動して整列させることはできなくなってしまった。

{ninja.map((item,index) => (
<Draggable>
<Grid item xs={12} md={6} lg={4} key={index}>

<NoteCard note={item} handleDelete={handleDelete} />

</Grid>
</Draggable>
))}

react-beautiful-dndの方も試してみる。

https://www.npmjs.com/package/react-beautiful-dnd-next

https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/#step-1-installing-react-beautiful-dnd

npm install react-beautiful-dnd --save
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

なぜかDraggable単体では読み込みエラーが出る。エラー要因を探しているとnext用の同様なプラグインを発見。こちらも試す。

npm install react-beautiful-dnd-next

code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
Could not resolve dependency:
npm ERR! peer react@"^16.8.5" from react-beautiful-dnd-next@11.0.5

react-beautiful-dndのまま進めていくか。おそらく要因としては他のタグDragDropContextなどで囲んでおらず、providerも設定していないのが問題となりそう。

下記のように作成していったらエラー。

<DragDropContext>
<Droppable droppableId='characters'>
{(provided)=>(
<ul className='characters' {...provided.droppableProps} ref={provided.innerRef}>
{ninja.map((item,index) => (
<Draggable key={index} draggableId={index} index={index}>
{(provided)=>(
<li {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<Grid item xs={12} md={6} lg={4} >
<NoteCard note={item} handleDelete={handleDelete} />
</Grid>
</li>
)}
</Draggable>

))}
{provided.placeholder}
</ul>
)}

</Droppable>
</DragDropContext>

A setup problem was encountered.

むむむ、一旦シンプルなテストページで実験してみるのが良さそう。

シンプルな形にしても、Warning: Prop `data-rbd-draggable-context-id` did not match. Server: "0" Client: “1”のエラーが出たので検索。

Just call resetServerContext() server side: As an example, in a next.js page i simple call it in getServerSideProps

next.jsの場合はresetServerContext() を呼ぶ必要があるとのこと。

https://devdreamz.com/question/184573-how-to-fix-data-rbd-draggable-context-id-did-not-match-server-1-client-0

https://stackoverflow.com/questions/64242578/how-to-fix-data-rbd-draggable-context-id-did-not-match-server-1-client-0

It occurs because DOM and window is not loaded before that our component gets loaded.

draggable-context-idがサーバーサイドとクライアントサイドで食い違うためこの問題が起きている。

以前makestyleでどう良いの問題が起きたときには{ name: "MuiExample_Component" }に名称を統一して対応していた。

下記を見ていると、どうやらclassの塊のよう、これをどう対処するか。resetServerContext()で一気に消せればよかったのだが。機能せず。

https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md

resetServerContext() が使えない各国の人も死屍累々のよう。document.jsをいじるとなんとかできるようだが既に複雑すぎるdocument.jsを持っているのでこちらは導入を見送る。

他の代替策がないか。

まずはカードの表示の順番を確認。

現在はデータベースに格納された順番で引き出せているよう。

Getstatic propsでprops: { ninja: posts }に格納された順番となる。

この順番を入れ替えれば良いので、左右の矢印を追加し、クリックしたら次のカードのdocidと入れ替えられるようにするか。いや、カードの順番をつけてしまった方が早いし、整理しやすそう。

pile.cardorder = data.cardorder ?data.cardorder:null

追加の時にはcardorderの最後尾を参照し、+1すれば良い。

まずはcardorderがあるものだけをカードどして表示。

{ninja.map((item,index) => (
<>
{item.cardorder &&
<Grid item xs={12} md={6} lg={4} key={index}>
<NoteCard note={item} handleDelete={handleDelete} />
</Grid>
}
</>

))}

下記を導入。

import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';

const useStyles=makeStyles({
rightarrow:{
float: 'right'
},

このボタンにイベント関数を紐づける。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.