JavaScript (44) ドラッグアンドドロップを使ってみた

BASIC の構文解析の途中ですが、話題を変えます。

コロナ禍でオフラインのワークショップが開きにくい状況なので、オンラインでワークショップができないか研究を始めることにしました。カードを使ったワークショップを Zoom や Skype などのオンライン会議ツールで実施するときに、JavaScript と Ruby でオンラインのカードシステムを作れないか、検討しようと思います。

まずはクライアント側でいろいろ実験をやってみます。カードはイメージ(ビットマップ)を使うとしたとき、HTML5 + JavaScript ではイメージには元々ドラッグ可能という設計になっているので、これを試してみたいと思います。

最初の実験結果をこちらに公開しました。

Dragndrop01

ドラッグアンドドロップに関するイベントリスナーを onload の時点で準備するだけです。そもそも HTML でイメージを配置するだけで、ドラッグはできます(ただ、ドロップしても何も起きませんが)。

今回の実験は単純にカードを画面上で移動するだけでしたが、システムとしてはディーラ役が複数のメンバに対してカードを分配する機能も必要になるでしょう。ディーラやメンバがそれぞれの URL にアクセスしてもらういわばクラウド型のシステムにする予定です。

関連項目

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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