info

category : HTML5
[HTML5]Drag&Drop API  @ JavaScript , HTML5 2010年5月6日

W3Cで色々策定しているみたいです。色々と。
ブラウザがネイティブのDnDをサポートしているそうなので遊んでみました。

HTML5 – DnD

WindowsXPの以下のブラウザで動作を確認しました。
Firefox3.6
Google Chrome 4.1.249.1064

参照したサイト一覧(順不同)

HTML5.JP – ネイティブのドラッグ & ドロップ
http://www.html5.jp/html5doctor/native-drag-and-drop.html

本の虫 – QuirksBlog: HTML5のドラッグ&ドロップはクソだ
http://cpplover.blogspot.com/2009/09/quirksblog-html5.html

Diaspar Journal – Drag & Drop – HTML5 版
http://diaspar.jp/node/200

[JavaScript]painting on canvas  @ PHP , JavaScript , HTML5 , ajax 2010年3月22日

マウスで絵を描く→pngで保存 というものです。
jsとphpで出来ています。
「保存」を押したときのリアクションはtwitterっぽくしてあります。
canvasタグの使い方はこちらが詳しいです。HTML5.jp – Canvas
「みんなの絵を見る」機能無しのflashバージョンはこちら[Flashからjpg]

HTML5.jpによると下記の環境で動きます。IEは論外。
Firefox 2以降
Safari 4以降
Google Chrome 2以降
Opera 9.2以降

キャンバスドラッグ:線を引く
「太」の数字変更:線の太さ変更
カラーパレットクリック:色選択
「保存」クリック:pngで保存
「消去」クリック:キャンバスを真っ白に
「みんなの絵を見る」:みんなの絵一覧
サムネイルクリック:pngオリジナルサイズを別ウィンドウで開く

painting on canvas


さて、次は何を作ろうか。