HTML5 の Drag and Drop API を使用して作成した、ドラッグ&ドロップのサンプルです。
作り方は、 HTML5 Drag and drop demonstration を参考にしました。 実際に動いているものを目にすると励まされますね。 どうも有難う、Laurent Jouanneau.
他の資料としては、 ドラッグの操作 - MDC あたりにも目を通しておくと良いかも知れません(より良い実装方法が見つかるかも?)。
作り方は、 HTML5 Drag and drop demonstration を参考にしました。 実際に動いているものを目にすると励まされますね。 どうも有難う、Laurent Jouanneau.
他の資料としては、 ドラッグの操作 - MDC あたりにも目を通しておくと良いかも知れません(より良い実装方法が見つかるかも?)。
Demo
Firefox 10 で動作しないことを確認しました(2012-02-16)。
問題.次の表をドラッグ&ドロップにより完成させてください。
|
|
ソースコード
ここでは 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 | 初版 | |