Drag & Drop - HTML5版

HTML5 の Drag and Drop API を使用して作成した、ドラッグ＆ドロップのサンプルです。

作り方は、 HTML5 Drag and drop demonstration を参考にしました。 実際に動いているものを目にすると励まされますね。 どうも有難う、Laurent Jouanneau.

他の資料としては、 ドラッグの操作 - MDC あたりにも目を通しておくと良いかも知れません（より良い実装方法が見つかるかも？）。

Demo

このDemoはBloggerの仕様変更の影響で動作しません（画像に対してビュワー機能が追加された影響）。（追記 2011-10-15）（解決済み 2011-10-19）
Firefox 10 で動作しないことを確認しました（2012-02-16）。

問題．次の表をドラッグ＆ドロップにより完成させてください。

FIFA World Cup 開催国 2006年 Berlin 2010年 Johannesburg 2014年 Rio de Janeiro

選択肢

  

ソースコード

ここでは JavaScript のみ掲載します。 HTML と CSS については 全ソースコード を参照してください。

JavaScript では、HTML5 のネイティブAPIを呼び出すだけです。 いかなる外部ライブラリも使用しません。

JavaScript

更新履歴

日付	内容
2011-02-18	情報	アーカイブ
2009-11-18	修正	Firefox 3.5 以外に、Chrome 4 でも動くように JavaScript を修正しました。 Chrome 3, Safari 4 では視覚的に問題がありますが動きます。 ….setData('id',…) → ….setData('text',…) ….getData('id',…) → ….getData('text',…)
2009-02-28	変更	気に入らない所を修正（特に「初期化」と「ドロップの受け入れ拒否」）
2008-09-12	初版