Hatena::Groupjavascript

lnzntのJavaScript日記 このページをアンテナに追加 RSSフィード

2011年07月01日(金)

Canvas API (復習2) ドラッグ & ドロップ

23:55 | Canvas API (復習2) ドラッグ & ドロップ - lnzntのJavaScript日記 を含むブックマーク はてなブックマーク - Canvas API (復習2) ドラッグ & ドロップ - lnzntのJavaScript日記 Canvas API (復習2) ドラッグ & ドロップ - lnzntのJavaScript日記 のブックマークコメント

HTML の DIV 要素にファイルをドロップして表示するサンプルです。

参考書籍『HTML5 ガイドブック』のロジックを真似てつくったものですが、コード自体は原型を留めておりません。

実行確認は、Ubuntu Linux 11.04 の Firefox 5.0 でしてます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>お試し</title>
    <style>
        body {
            background-color: #999999;
        }
        #dp {
            width:              640px;
            height:             480px;
            background-color:   #cccccc;
            border:             #000000 5px solid;
        }
    </style>

    <script src="utils.js"></script>
    <script>
        (function() {
            /*
                window の load イベントハンドラ
            */
            window.addEventListener('load', function() {
                var dp = get_element('dp');

                var show_image = function(file) {
                    try {
                        dp.remove_children();

                        file.is_image().read_as_url({onload: dp.create_img.bind(dp)});

                    } catch (e) { alert(e); }
                };

                dp.prevent_default('dragover');
                dp.prevent_default('drop');
                dp.addDropEventListener(show_image);
            }, false);
        })();
    </script>
</head>

<body>
    <div id="dp">ここに画像をドラッグ</div>
</body>
</html>

JavaScript の関数は、以下の utils.js に書きました。

続きを読む