JavaScript (45) スクロール時の不具合を改修

前回作成したカードのサンプルは、スクロール後にドラッグアンドドロップするとカードがどこかへ行ってしまうという不具合がありました。これは、カードの左上のクライアント座標が、スクロールすると変わってしまうのに、onload 時(ページのロード時)に覚えたものをそのまま使ってカードの移動先を計算していたためです。

クライアント座標はブラウザに表示されるページの左上を原点とした座標です。スクロールすると変わってしまいます。

そこで、スクロールのイベントリスナーを登録し、スクロール後にカード左上のクライアント座標を取得し直すように修正しました。スクロールは連続して行われる可能性もあるので、スクロール後 500ms(0.5秒)待ってからその処理を行っています。

プログラムのソースと実行結果はこちらに公開しました。

今回作成したサンプルは静的な HTML5 + JavaScript のコードでしたが、最終的にはメンバー毎に違うものを表示する必要があるので、サーバーからの情報を元に表示内容を変更する処理を作り込まなければなりません。これはおそらく Ruby の連載で行った Ajax (Asyncronous JavaScript +XML) と呼ばれる非同期通信を使うことになるでしょう。

関連項目

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。