このページではソースコードの一部分を簡単な解説をしています。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。
概要
ドラッグ＆ドロップAPIを使う練習の為に作成しました。並んでいる数字をドラッグ＆ドロップで空いているマスに移動し、縦・横・斜め、どれを足しても同じ数にするパズルです。移動した数字を取り消すには×のパネルを取り消したい数字の上にドラッグ＆ドロップして下さい。スタートボタンの横の数字を指定することで任意のマスの数で遊べます。大きい画面で遊びたい方はコチラからお願いします。Chromeブラウザとedgeブラウザで動作確認をしています。モバイル端末などでのタッチ操作では動作しません。
要素をドラッグできるようにする
要素をドラッグ出来る様にするにはdraggable属性をtrueに設定しondragstartのグローバルイベントハンドラを追加することで可能になります。今回作成したパズルでは、並んでいる数字の要素にdraggable属性とdragイベントのグローバルイベントハンドラを設定しています。
ドロップ先に渡すデータを設定する
dragイベントはイベントのデータ（テキスト、HTML、リンク、ファイルなど）を格納するdataTransferプロパティを持っています。今回作成したパズルでは、ドラッグされた要素のtextcontentプロパティをsetData()メソッドを使用してdataTransferプロパティへ格納しています。
ドロップできるようにする
ブラウザーは要素に何かがドロップされたとき、あらゆることが発生するのを防いでいます。この動作を変更して要素をドロップ可能にするには、ondragoverとondropイベントハンドラー属性を持たせなければいけません。今回作成したパズルでは、ドロップ先のtableタグのtd要素に二つのイベントハンドラー属性を持たせました。td要素にドロップをするとdataTransferプロパティへ格納されていたテキストをtd要素のtextcontentプロパティに設定します。
最後までお読みいただきありがとうございました。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。