第2週難問ブログ

実施内容

データ内のアイデンティティ値により,ユーザのアイデンティティと登録写真をスライダ形式で表示する機能を実現した.
Error
mouseEventを使用してスライダを実装してみます.

const imageRef = useRef(null)
const [isDrag, setIsDrag] = useState(false)
const [startX, setStartX] = useState()

スライダは左右に移動するので、マウスのX座標を使ってマウスをドラッグ＆ドロップする場合、画像もドラッグ＆ドロップできます.
mouseDown、mouseMove、mouseUPイベントは画像をうまく移動できますが、画像が領域、ベースラインを超えている場合は、次のスライドまたは前のスライドに自動的に移動するロジックを作成したい場合があります.
ソリューションポイント
1.OffSetXを求め、あるOffSetXが多すぎる場合、次のインデックスの画像を読み込みます.
2.特定のOffSetXを経て、マウスが離れると、クリックした画像の残りの部分をマウスで移動します.
3.スライダに関するライブラリの作成
に感銘を与える

JavaScript Eventを勉強します.

はスクリーンの1つの領域であるため、screenX、Y/pageX、Y/clientX、Y/offsetXおよびYに関する

を学習する.

画面

を学習する必要があります.

レイアウトのみを実施することは可能であるが,データ連動には多くの不足がある.