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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.